Question

我在导航栏上有一个按钮，如下面的代码所示：

＆＃13;

<div class="navbar navbar-default navbar-static-top">
 <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#">Brand</a>
 </div>
 <div class="collapse navbar-collapse">
   <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">More</a></li>
    <li><a href="#">Options</a></li>
     <li><button type="button" class="btn btn-default navbar-btn">Login</button></li>
   </ul>
 </div>
</div>

＆＃13;

工作示例：http://www.bootply.com/IgS3X7CMs8#

所以，问题是，当我在移动视图中看到按钮位于左边距时，未与其他链接对齐。

有没有办法对齐它？最好使用boostrap类（不向组件设置固定的余量）

Answer 1

是的，您需要为按钮设置边距。

.navbar-btn { margin-left: 15px }

它将与其他元素对齐。当然，您需要指定移动视图所在的断点。

@media (max-width: 767px) { .navbar-btn { margin-left: 15px; } }

Answer 2

你可以使用这样的东西：

<a href="#" id="myBtn"><div class="btn btn-default navbar-btn">Login</div</a>

@media (max-width: 767px) { 
  a#mybtn {
    margin: 8px 0px 10px 16px;
    padding: 0;
  } 
}

a#myBtn {
  margin: 8px 0 0 0;
  padding: 0;
}

＆＃34;导航栏按钮＆＃34;折叠时不对齐（移动视图）

2 个答案: