Question

所以我有一个bootstrap 36网格列。左侧是侧边栏，右侧是内容。当我使用向右/向左拉动它只能在桌面上工作？

<div class="container">
    <div class="row">                      
        <div id="sidebar" class="col-md-9 col-xs-36 pull-right">
        </div>
        <div id="content" class="col-md-27 col-xs-36 pull-left">
        </div>
    </div>
</div>

在移动设备上，侧边栏仍然首先显示。为什么呢？

好的我已经定制了我的网格，你可以在bootstrap网站上做到这一点。请停止说我不能。

Answer 1

因为您使用了col-xs-36，这意味着此列都占用了100％的可用宽度，那么为什么要使用pull-right或pull-left，减少列数，然后它没问题

＆＃13;

.box{padding-top: 30px;}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<div class="container">
    <div class="row">                      
        <div id="sidebar" class="col-md-9 col-xs-6 pull-right box">
          <p>abd abd abd abd abd abd abd abd abd abd abd abd </p>
        </div>
        <div id="content" class="col-md-3 col-xs-6 pull-left box">
          <p>abd abd abd abd abd abd abd abd abd abd abd abd </p>
        </div>
    </div>
</div>

＆＃13;

Answer 2

试试这段代码。

<div class="container">
    <div class="row">                      
        <div id="sidebar" class="pull-right col-xs-9">
        </div>
        <div id="content" class="pull-left col-xs-27">
        </div>
    </div>
</div>

Answer 3

在移动设备上，侧边栏仍然首先显示。为什么呢？

解释它..你有一个引导程序row，其工作是将其中的所有元素与col-*中提到的各自宽度对齐。而且如果空间不足以显示连续的所有元素，那么它将一个推到另一个之下。这就是它被称为响应的方式，它是Bootstrap的默认行为。

现在你说你自定义代码以拥有36网格系统，我知道它。

现在在下面的代码中。

 <div class="container">
    <div class="row">                      
        <div id="sidebar" class="col-md-9 col-xs-36 pull-right">
        </div>
        <div id="content" class="col-md-27 col-xs-36 pull-left">
        </div>
    </div>
</div>

您说row内的两个div必须占用超小型设备中的36列。正如您所提到的那样，36网格系统意味着36 = 100%宽度。

如上所述，row不能将div放在一行中，因为两者都是100％宽度的demading。所以它将它们移到另一个之下。

侧栏位于顶部，因为它是层次结构中首先提到的那个。

希望这是有帮助的

编辑1：如果您的目的是在左侧显示侧边栏，然后在所有设备的右侧显示容器......并且在移动设备上首先显示容器，然后再显示侧栏... @media查询的帮助，你可以赢得这个。下面的工作片段。这里还有 Working Fiddle

@media only screen and (max-width: 480px) {
  #sidebar {
    float: right !important;
  }
  #content {
    float: left !important;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div id="content" class="col-md-8 col-xs-12 pull-right">
      container
    </div>
    <div id="sidebar" class="col-md-4 col-xs-12 pull-left">
      Sidebar
    </div>

  </div>
</div>

左右拉不能在移动设备上工作

3 个答案: