Bootstrap:水平堆叠的列

时间:2016-01-09 07:59:44

标签: html css twitter-bootstrap

我在嵌套行中使用了3列。 而不是水平堆叠列垂直堆叠。 这是我的代码。 我已经尝试了stackoverflow个答案但没有工作。

  <div class="jumbotron mainBar">
      <div class="container mainBarContainer">
          <div class="row">
              <div class="col-xs-2">
                 <div class=" profilePic">
                  <a href="#section_1"><h2>1<small>st</small><p>Title</p></h2></a>
                 </div>

                </div>
              <div class="col-xs-4">
                 <h1>Hello, world!</h1>

              </div>
              <div class="col-xs-6 container">
                <div class="row">
                 <div clas="col-xs-4">
                  <div class=" profilePic1">
                   <a href="#section_1"><h2>1<small>st</small><p>Title</p></h2></a>
                  </div>
                 </div>
                 <div clas="col-xs-4">
                  <div class=" profilePic1">
                   <a href="#section_1"><h2>1<small>st</small><p>Title</p></h2></a>
                  </div>
                 </div>
                 <div clas="col-xs-4">
                  <div class=" profilePic1">
                   <a href="#section_1"><h2>1<small>st</small><p>Title</p></h2></a>
                  </div>
                 </div>
                </div>

              </div>
         </div>
      </div>
    </div>

这里是小提琴 fiidle

1 个答案:

答案 0 :(得分:2)

你有一个错误的错误。将clas更改为第二个容器内的class

demo