Question

我有一个bootstrap 3.0页面，左边是9个cols，右边是3个cols。我想要的是在屏幕大小小于768时隐藏3个右侧cols。这是我的代码结构：

<div class="col-md-3 col-sm-6 col-xs-12 hidden-xs">
     <div id="column_right">
   //php stuff goes here 
    </div>
 <div>

CSS是默认的bootstrap 3.0，但问题是，当我进入像手机一样的小屏幕尺寸时，正确的3列仍然是可见的。怎么了？

Answer 1

你的标记现在几乎可以正常工作。这是一个bootply [在左栏中添加]

http://www.bootply.com/FYLVttbyUH

以下是bootply不可用的代码：

<div class="col-md-9 col-sm-6 col-xs-12 red">
  <div id="column_left">
    <span>This is always shown</span>
  </div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 hidden-xs blue">
  <div id="column_right">
    <span>This should be hidden on mobile devices</span>
  </div>
  <div>
  </div></div>


            <div id="push"></div>

Answer 2

您的代码不包含2列。

也许你想要的是这样的东西？

<div class="row">

    <div class="col-md-9 col-sm-6 col-xs-12">
        <!-- persistent column -->
    </div>
    <div class="col-md-3 col-sm-6 hidden-xs">
     <div class="row">
        <div id="column_right">
       //php stuff goes here 
        </div>
     </div>    
    </div> 
<div>

Bootstrap 3.0 hidden-xs无效

2 个答案: