twitter-bootstrap – 使用Bootstrap 3 Navbar的最佳方式,没有响

发布时间：2020-12-18 00:07:44 所属栏目：安全来源：网络整理

导读：我试图在Bootstrap 3中创建一个简单的Navbar不会崩溃 – 响应在这里不是必要的，因为我们只有一个简单的标题在左边的按钮在右边。我的目标是让所有分辨率的标题按钮总是相同。这样的东西： div class="navbar navbar-fixed-top" form class="navbar-form na

我试图在Bootstrap 3中创建一个简单的Navbar不会崩溃 – 响应在这里不是必要的，因为我们只有一个简单的标题在左边的按钮在右边。

我的目标是让所有分辨率的标题按钮总是相同。这样的东西：

<div class="navbar navbar-fixed-top">

    <form class="navbar-form navbar-right">
        <button class="btn btn-default">Button 1</button>
        <button class="btn btn-default">Button 2</button>
    </form>

    <a class="navbar-brand" href="#">Title Here</a>

</div>

我尝试了许多组合从documentation.和this post outlines how to use the new .nav-header classes.我试过复制.nav-header里面的元素 – 并尝试重写BS3媒体查询样式。

有没有更简单的方法使用导航栏没有崩溃？

解决方法

我可以找到的最好的方法是使用2个navbar标头容器，然后使用pull-left和pull-right，因为他们没有绑定到任何响应的媒体查询。

<div class="navbar navbar-fixed-top">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">Title Here</a>
    </div>
    <div class="navbar-header pull-right">
      <button type="button" class="btn btn-default navbar-btn">Button 1</button>
      <button type="button" class="btn btn-default navbar-btn">Button 2</button>
    </div>
</div>

Demo on Bootply：http://bootply.com/74912

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!