导航侧边栏折叠时调整内容 Bootstrap

Question

您好，我是 CSS 和引导程序的新手。我有一个按钮可以使导航侧边栏可折叠，我所需要的只是使页面的内容在导航侧边栏折叠时浮动到左侧，如果导航侧边栏展开则缩小。

请给我一个解决方案:(

下面是我的示例代码

      <nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header "> 
      <button type="button" class="navbar-toggle visible-lg" data-toggle="collapse" data-target="#navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    <div class="collapse navbar-default navbar-collapse" >
    <div  class="pull-left" id="navbar-ex1-collapse">
      <ul class="nav navbar-default navbar-nav side-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle " data-toggle="dropdown" style="background:rgba(59, 89, 152, 0.28);"><i class="fa fa-user"></i> My Profile <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li ><a class="dropdown-color" href="#" style="background:rgba(59, 89, 152, 0.28);" ><i class="fa fa-user"></i> View Profile</a></li>
            <li><a class="dropdown-color" href="#" style="background:rgba(59, 89, 152, 0.28);"><i class="fa fa-edit"></i> Edit Profile</a></li>
          </ul>
        </li>
        <li><a href="Dashboard.html"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-desktop"></i> Deployment <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#" style="background:rgba(59, 89, 152, 0.28);"><i class="fa fa-edit"></i> Deployment Parameter</a></li>
            <li><a href="#" style="background:rgba(59, 89, 152, 0.28);"><i class="fa fa-bar-chart-o"></i> Package Deployment</a></li>
            <li><a href="#" style="background:rgba(59, 89, 152, 0.28);"><i class="fa fa-bar-chart-o"></i> Release Deployment</a></li>
          </ul>
        </li>           
      </ul>
    </div>
      <ul class="nav navbar-nav navbar-right navbar-user">
        <li class="dropdown user-dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> Username <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#"><i class="fa fa-user"></i> View Profile</a></li>
            <li><a href="#"><i class="fa fa-gear"></i> Edit Profile</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="fa fa-power-off"></i> Log Out</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->

 <div class="auto-adjust" id="page-wrapper">

//table goes here

</div>

下面是我写的调整内容的css类

CSS:
 .auto-adjust{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  margin:0;
  float:left;
}

Answer 1

在 Twitters Less 代码中，导航栏折叠点默认由 @grid-float-breakpoint 设置（设置为 768px）。现在您可以使用 CSS 媒体查询仅在此之前应用您的代码： 少

@media (max-width: (@grid-float-breakpoint - 1)) { 
  padding-right: 15px;
  padding-left: 15px;
  margin: 0 auto;
  float:left;
}

CSS 输出：

@media (max-width: 767px) {
  padding-right: 15px;
  padding-left: 15px;
  margin: 0 auto;
  float: left;
}

请注意，您最好使用 Bootstrap 的网格，请参阅 http://getbootstrap.com/css/#grid-media-queries。当绿色宽度小于 768 像素时，也会应用 xs 网格。 试试下面的代码：

<div class="row">
<div class="col-xs-12 col-sm-6">//table goes here</div>
<div class="col-xs-12 col-sm-6">//other content</div>
</div>