左右拉不上手机

Question

所以我有一个引导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> 

在手机上，侧边栏仍然显示第一个。为什么？

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

Answer 1

因为你已经使用col-xs-36这意味着你为什么要使用pull-right或pull-left，减少列的数量这一栏都以100％的有效宽度，然后再这将是确定

.box{padding-top: 30px;}

<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>

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％的宽度。所以它将它们移动到另一个之下。

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

希望这是有益

编辑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>