Question

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

请建议我一个解决方案:(

下面是我的示例代码

      <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中更少编码默认情况下，@ 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>

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

1 个答案: