Question

在我的代码中，我有nav-tabs和on the right我有一个search box。现在，在调整大小时，我希望所有内容都以特定宽度在另一个之下。如果可能的话，如何才能通过CSS or jquery实现这一目标。其他解决方案也非常受欢迎。

这是我的代码：

<div class="navbar navbar-default" style="background-color: #666666; border-bottom: 1px solid white;">
<div class="navbar-inner">
      <div class="navbar-header pull-left">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar" style="background-color: #FFFFFF;"></span>
          <span class="icon-bar" style="background-color: #FFFFFF;"></span>
          <span class="icon-bar" style="background-color: #FFFFFF;"></span>
        </button>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-3">
        <ul class="nav nav-tabs" id="demo">         
          <li class="nav_zero" id="nav0"><a href="#home" style="color: #FFFFFF;" data-toggle="tab" id="anc1"><i class="fa fa-home fa-1x"></i> Home</a></li>  
          <li class="nav_zero" id="nav1"><a href="#profile" style="color: #FFFFFF;" data-toggle="tab">Profile</a></li> 
          <li class="nav_zero" id="nav2"><a href="#something1" style="color: #FFFFFF;" data-toggle="tab">Something1</a></li> 
          <li class="nav_zero" id="nav3"><a href="#something2" style="color: #FFFFFF;" data-toggle="tab">Something2</a></li> 
          <li class="nav_zero" id="nav4"><a href="#" style="color: #FFFFFF;" data-toggle="tab">Messages<span class="badge" style="background-color: red;">1</span></a></li>
          <ul class="nav pull-right">
          <li>
            <form class="navbar-form" role="search" style="margin-bottom: 0px;">
        <div class="form-group has-feedback">
        <label class="control-label sr-only" for="inputSuccess4">Input with success</label>
          <input type="text" class="form-control" placeholder="Search" id="inputSuccess4">
          <span class="glyphicon glyphicon-search form-control-feedback"></span>
        </div>

      </form>
          </li>
          </ul>         
        </ul> 
      </div>
</div>
</div>

修改我添加了以下代码：

@media (max-width: 840px) {
.pull-right {
  margin-right: 10px;
  float: left !important;
}
.nav-tabs > li {
  float: none;
}
.nav-tabs > li + li {
  margin-top: 2px;
  margin-left: 0;
}
}

这让我得到了我想要的东西但完全改变意义是一种好习惯吗？

修改

.pull-right-custom {

  float: right !important;
}

@media (max-width: 840px) {
.pull-right-custom {
  margin-right: 10px;
  float: left !important;
}

这个怎么样？我想这现在完全没问题了。

如何在引导程序中调整窗口大小时使nav-tabs堆叠

0 个答案: