Bootstrap：防止默认移动崩溃

Question

如何阻止某些默认的移动功能？ （参考Bootstrap - Creating a mobile nav that doesn't use collapse）

特别想得到两行导航栏：

• 第一个带有徽标和页面标题；
• 第二个是切换侧边栏的东西，搜索框填充其余空间。

第一次尝试时，我最终忽略了导航栏并构建了自己的布局，但在再次放弃之前，我想我会检查社区。主要问题是搜索框坚持 100% 宽度（在小屏幕上）。

使用 Chrome 开发工具，我可以在 .form-control 中关闭 width:100% 但我似乎无法让 .form-group 收缩

<div class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
  <div class="container">
    <div class="navbar-header">
      <a href="/" class="navbar-brand">af</a>
    </div>
    <div id="navbar-main">
      {{page.title}}
    </div>
  </div>

  <div class="container">
    <div class="navbar-left">
      <ul class="nav navbar-nav">
        <li><a href="" data-toggle="offcanvas">Crieria</a></li>
      </ul>
    </div>
    <div id="navbar-search" class="navbar-right">
     <form class="navbar-form " role="search">
        <div class="form-group">
          <input type="text" size="20" class="form-control" placeholder="Search">
          <!-- <button type="submit" class="btn btn-default">Submit</button> -->
        </div>
      </form>
    </div>
  </div>
</div>

Answer 1

试试这个：

如果您需要在 md 和 lg 视图中使用全宽，请使用 container-fluid 而不是 container

DEMO

 <div class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
            <div class="container">
                <div class="navbar-header col-xs-6 col-sm-6 col-md-6 col-lg-6">
                    <a href="/" class="navbar-brand">af</a>
                </div>
                <div id="navbar-main col-xs-6 col-sm-6 col-md-6 col-lg-6">
                    {{page.title}}
                </div>
            </div>

            <div class="container">
                <div class="navbar-left col-xs-4 col-sm-4 col-md-2 col-lg-2">
                    <ul class="nav navbar-nav">
                        <li><a href="" data-toggle>Crieria</a></li>
                    </ul>
                </div>
                <div id="navbar-search" class="navbar-right col-xs-8 col-sm-8 col-md-10 col-lg-10">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                        <!-- <button type="submit" class="btn btn-default">Submit</button> -->
                    </div>
                </div>
            </div>
        </div>

Answer 2

如果您不希望引导行为，请不要使用引导类，而是使用您想要的样式和行为定义您自己的类。

如果您尝试为任何具有相当大的尺寸和复杂性的页面元素覆盖引导行为；你会发现，如果你在覆盖它的所有行为时避免在该元素上使用引导类，那会容易得多。

---

如果你想要的只是一个有两行的导航栏，尽管你可以使用 boostrap 默认类来实现。jsFiddle (link)

<div class="container">
    <div class="navbar">
        <div class="navbar-inner">

           <img src="http://placehold.it/70x70" class="span1" style="position:relative;top:10px">

           <div class="span10">
               <div class="row">
                   <div class="span2 offset5" style="text-align:right">
                       <div class="navbar-text">
                            <p><a href="#">Login</a></p>
                       </div>
                   </div>
                   <div class="span2 offset1">
                       <div class="pull-right">
                            <form class="navbar-form">
                               <div class="input-append">
                                   <input class="span2" id="appendedInputButtons" type="text">
                                     <button class="btn" type="button">Search</button>
                               </div>
                           </form>
                       </div>
                   </div>
               </div>

               <div class="row">
                   <div class="span10">
                       <ul class="nav pull-right">
                           <li><a href="#">Page 1</a></li>
                           <li class="divider-vertical"></li>
                           <li><a href="#">Page 2</a></li>
                           <li class="divider-vertical"></li>
                           <li><a href="#">Page 3</a></li>
                           <li class="divider-vertical"></li>
                           <li><a href="#">Page 4</a><li>
                       </ul>
                   </div>
               </div>

           </div>

        </div>
    </div>
</div>