Question

我一直在寻找年龄，但无法获得以下代码。一切都很好，除了列不在移动大小视图上堆叠。我尝试添加col-xs-12和其他版本，但无法弄清楚。

<div class="container-fluid offers"> 
    <div class="row row-eq-height">
      <div class="col-md-6 website-package">
        <div class="row">
          <div class="col-md-4 col-md-offset-4 featured-image">
            <img class="center-block img-responsive package-icon" src="assets/img/website.png">
          </div>
          <div class="col-md-12 featured-image">
           <p>Lorem ipsum dolor sit amet</p>
         </div>         
       </div>
     </div>
   <div class="col-md-6 website-package">
        <div class="row">
          <div class="col-md-4 col-md-offset-4 featured-image">
            <img class="center-block img-responsive package-icon" src="assets/img/online-shop.png">
          </div>
          <div class="col-md-12 featured-image">
           <p>Lorem ipsum dolor sit amet</p>
           </div>         
         </div>
       </div>   
      </div>
    </div>
  </div>

这是各种课程的CSS，但我怀疑这与它有什么关系以防万一。

.website-package {
    background: #5FA1A8;
    border-color: #fff;
    border-style: solid;
    margin: 30px;
}

.featured-image{
    background:transparent;
    border: none;
}

提前感谢您的回复！

Answer 1

你可能犯了一个错误。我看到margin:30px上有.website-package。删除或使用margin:0px 30px。这是JSfiddle：https://jsfiddle.net/3z1btenk/1/

bootstrap 3列未在移动设备上堆叠

1 个答案: