Выравнивание кнопок кнопок и кнопок блока в незаваленной навигационной панели

-1

Я хочу выровнять ссылки кнопок и кнопку «Пожертвовать», т. Е. Заставить их начинать в том же положении. Я пробовал использовать сетку, но результат был неудовлетворительным.Выравнивание кнопок кнопок и кнопок блока в незаваленной навигационной панели

Адрес 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>

источник

2016-09-26 Sun Qingyao

Не уверен, что вы пытаетесь сделать, но позволить им начать в той же точке, просто требует левых отступов на ссылку кнопки, чтобы быть «0» , https://jsfiddle.net/o2dr4w8e/4/ – Goombah

Если на «сделать их начинают в той же позиции» вы имеете в виду обе кнопки делают выравнивание по левому краю, то все, что вам нужно сделать, это просто применить text-align: left к кнопка (.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/

источник

2016-09-26 10:48:29 Aziz

Я не знаю, что именно вы пытаетесь задать здесь. Я хочу сказать, вы хотите, чтобы "donate" выровнялся с текстом ссылки. Если это то, что вы хотите, вы можете применить этот css-

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

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

источник

2016-09-26 10:50:01

Выравнивание кнопок кнопок и кнопок блока в незаваленной навигационной панели

ответ

Смежные вопросы