Question

我想对齐按钮链接和＆＃34;捐赠＆＃34;按钮，即让它们从相同的位置开始。我尝试过使用网格系统，但效果不理想。

这是fiddle。

＆＃13;

<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>

＆＃13;

Answer 1

如果＆＃34; 让他们从同一个位置开始＆＃34;你的意思是让两个按钮保持对齐，然后您只需将text-align: left应用于按钮（.navbar-btn .btn-danger）。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 2

我不知道你到底要问的是什么。我的意思是你希望"donate"与链接文本对齐。如果这是你想要的，你可以应用这个css -

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

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

在未折叠导航栏中对齐按钮链接和阻止按钮

2 个答案: