Question

我正在努力获得我想要的引导程序布局。这是我希望实现的目标。

大屏幕应该是什么样的（我知道怎么做）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="stream-object" data-stream="val1">Item 1</li>
  <li class="stream-object" data-stream="val2">Item 2</li>
  <li class="stream-object" data-stream="val3">Item 3</li>
</ul>

在中型屏幕上看起来应该是什么样子（这就是我被困住的地方）：

-------------------------------------------------------
|   Column 1  |  Column 2   |  Column 3  |  Column 4  |
-------------------------------------------------------

小屏幕应该是什么样子（我知道怎么做）：

-----------------------------------------
|   Column 1  |  Column 3  |  Column 4  |
|   Column 2  |            |            |
-----------------------------------------

任何建议????

Answer 1

以下是解决方案：

<div class="row">
    <div class="col-md-4 col-sm-12 col-lg-6">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-lg-6">Column 1</div>
            <div class="col-md-12 col-sm-12 col-lg-6">Column 2</div>
        </div>
    </div>
    <div class="col-md-4 col-sm-12 col-lg-3">Column 3</div>
    <div class="col-md-4 col-sm-12 col-lg-3">Column 4</div>
</div>

Answer 2

＆＃13;

.grid {
  background: #123;
  color: white;
  padding-top: 15px;
  padding-bottom: 15px;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 col-md-4 col-lg-6">
      <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-6 grid">Column 1</div>
        <div class="col-sm-12 col-md-12 col-lg-6 grid">Column 2</div>
      </div>
    </div>
    <div class="col-sm-12 col-md-4 col-lg-3 grid">Column 3</div>
    <div class="col-sm-12 col-md-4 col-lg-3 grid">Column 4</div>
  </div>

</div>

＆＃13;

试图让Bootstrap列崩溃我想要的东西

2 个答案: