Ausrichten von Schaltflächenverknüpfungen und Blockschaltflächen in nicht komprimierter Navigationsleiste

-1

Ich möchte die Schaltflächenverknüpfungen und die Schaltfläche "Spenden" ausrichten, d. H. Sie sollen an der gleichen Position beginnen. Ich habe versucht, das Rastersystem zu verwenden, aber das Ergebnis war nicht zufriedenstellend.Ausrichten von Schaltflächenverknüpfungen und Blockschaltflächen in nicht komprimierter Navigationsleiste

Hier ist die fiddle.

<head> 
 
    <title> 
 
    Test 
 
    </title> 
 
    <!-- Bootstrap --> 
 
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="header"> 
 
    <nav class="navbar navbar-default navbar-static-top"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav navbar-right" style="margin: 0"> 
 
      <li><a href="#">Log In</a> 
 
      </li> 
 
      <li> 
 
       <p class="navbar-btn"> 
 
       <a href="#" class="btn btn-danger btn-block">Donate</a> 
 
       </p> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <!--/.nav-collapse --> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
</body>

Quelle

2016-09-26 Sun Qingyao

nicht sicher, was Sie zu tun versuchen, aber lassen sie an der gleichen Stelle starten Sie einfach die linke Polsterung auf den Button Link erfordert ‚0‘ zu sein . https://jsfiddle.net/o2dr4w8e/4/ – Goombah

Wenn von „sie an der gleichen Stelle machen beginnen“ Sie beide Tasten ausgerichtet bedeuten machen nach links, dann alles, was Sie tun müssen, ist einfach anzuwenden text-align: left zu der Knopf (.navbar-btn .btn-danger).

.navbar-btn .btn-danger { 
 
    text-align: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="header"> 
 
    <nav class="navbar navbar-default navbar-static-top"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
     <ul class="nav navbar-nav navbar-right" style="margin: 0"> 
 
      <li><a href="#">Log In</a> 
 
      </li> 
 
      <li> 
 
      <p class="navbar-btn"> 
 
       <a href="#" class="btn btn-danger btn-block">Donate</a> 
 
      </p> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</div>

https://jsfiddle.net/azizn/mou33Lkz/

Quelle

2016-09-26 10:48:29 Aziz

Ich weiß nicht, was genau Sie hier zu fragen versuchen. Ich meine, willst du "donate" mit dem Linktext ausrichten. Wenn das, was Sie wollen, können Sie sich bewerben diese CSS-

.navbar-btn a{ 
    text-align:left; 
} 

.navbar-nav li>a:first-child{ 
    padding-left:0px;//you can adjust this accordingly 
}

Quelle

2016-09-26 10:50:01

Ausrichten von Schaltflächenverknüpfungen und Blockschaltflächen in nicht komprimierter Navigationsleiste

Antwort

Verwandte Themen