Bootstrap 3 - 并排显示多个面板

时间：2016-07-08 13:49:55

标签： css twitter-bootstrap-3

所以我有一个在Bootstrap 3上运行的网站，并且有一个问题让面板按照我想要的顺序排列。在底部是它现在的样子。

我想要的是左下角的最后一个面板向上移动以适应左上方面板的下方，但我不知道如何去做它。它必须是我想念的简单事物。任何意见是极大的赞赏。谢谢！

My jFiddle 

<div class="row">
      <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
          <div class="panel-heading">Test</div>
          <div class="panel-body">Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.</div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
          <div class="panel-heading">Test</div>
          <div class="panel-body">Test Content</div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
          <div class="panel-heading">Test</div>
          <div class="panel-body">Test Content</div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
          <div class="panel-heading">Test</div>
          <div class="panel-body">Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.</div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
          <div class="panel-heading">Test</div>
          <div class="panel-body">Test Content</div>
        </div>
      </div>
    </div>

Panels

2 个答案:

答案 0 :(得分：1)

您需要将最后一个面板放在第一个面板的同一列中：

<div class="row">
    <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
            <div class="panel-heading">Test</div>
            <div class="panel-body">Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.</div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">Test</div>
            <div class="panel-body">Test Content</div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
            <div class="panel-heading">Test</div>
            <div class="panel-body">Test Content</div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
            <div class="panel-heading">Test</div>
            <div class="panel-body">Test Content</div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-6">
        <div class="panel panel-primary">
            <div class="panel-heading">Test</div>
            <div class="panel-body">Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.</div>
        </div>
    </div>
</div>

答案 1 :(得分：1)

我相信你希望每一列都有col-md-6类，而不是每个子项。

<div class="row">
  <div class="col-xs-12 col-sm-6">
    <!-- Left column panels -->
  </div>

  <div class="col-xs-12 col-sm-6">
    <!-- Right column panels -->
  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-xs-12 col-sm-6">

    <div class="panel panel-primary">
      <div class="panel-heading">Test</div>
      <div class="panel-body">
        Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a
        lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test
        Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with
        a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.Test Content with a lot of stuff.
      </div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">Test</div>
      <div class="panel-body">Test Content</div>
    </div>

  </div>

  <div class="col-xs-12 col-sm-6">
    <div class="panel panel-primary">
      <div class="panel-heading">Test</div>
      <div class="panel-body">Test Content</div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">Test</div>
      <div class="panel-body">Test Content</div>
    </div>


    <div class="panel panel-primary">
      <div class="panel-heading">Test</div>
      <div class="panel-body">
        Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some
        stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.Test Content with some stuff.</div>
    </div>

    <div class="panel panel-primary">
      <div class="panel-heading">Test</div>
      <div class="panel-body">Test Content</div>
    </div>
  </div>

</div>

相关问题
最新问题