DEMO

Question

如何阻止某些默认移动功能？（c.f。Bootstrap - Creating a mobile nav that doesn't use collapse）

特别是，我想获得两行导航栏：

第一个带有徽标和页面标题;
第二个用于切换侧边栏的东西，其中一个搜索框填充了剩下的空间。

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

使用Chrome devtools，我可以关闭宽度：.form-control 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

如果你不想要Bootstrap行为，就不要使用bootstrap类，而是使用你希望它具有的样式和行为来定义你自己的类。

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

如果你想要的只是一个有两行的导航栏，你可以使用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>

Bootstrap：防止默认移动崩溃

2 个答案:

DEMO