Question

我使用的Bootstrap采用两列布局，适用于大屏幕尺寸。对于较小的屏幕，只有一列。

我想在左栏中列出主要内容，在右栏中列出插图等内容。为了确保插图在较小的屏幕上正确定位，我必须将左侧列中的内容分成不同的单元格，以便右侧列中的内容可以放置在它们之间，如下所示：

<div class="container">
  <div class="row">
     <div class="col-xs-12 col-md-6">
        The first text on the page.
     </div>
     <div class="col-xs-12 col-md-6">
        <img src="illustration.jpg" alt="">
     </div>
     <div class="col-xs-12 col-md-6">
        The text continues here.
     </div>
  </div>
</div>

现在，如果右栏中的图像很高，第一列中的单元格之间会有间隙，如下所示：

+--------------------++--------------------+
| some text that     ||     █▒▒███         |
| is placed in this  ||   ███████████      |
| column             ||  ██   ████████     |
+--------------------+|  █ ▄█▄ ████████    |
                      |  █ ▀█▀ █████████   |
                      |  ██   ███████████  |
                      |   █████████▓▓▓▓██  |
                      |     ███████▓▓▓▓██  |
                      |     ███████▓▓▓▓█   |
                      |     ███████▓▓▄▀    |
                      |     ███████▄▀      |
                      |   █████████        |
                      |  ██   █████        |
                      |  █ ▄█▄ ████        |
                      |  █ ▀█▀ ████        |
                      |  ██   ████▀        |
                      |   ███████▀         |
                      |     █▒▒█▀          |
                      +--------------------+
+--------------------+
| i would prefer     |
| this text to       |
| follow directly    |
| after the text     |
| above, and avoid   |
| the vertical space |
| caused by the tall |
| image in the right |
| hand column        |
+--------------------+

在较小的屏幕上看起来应该是这样，将车放在文本之间：

+--------------------+
| some text that     |
| is placed in this  |
| column             |
+--------------------+
+--------------------+
|     █▒▒███         |
|   ███████████      |
|  ██   ████████     |
|  █ ▄█▄ ████████    |
|  █ ▀█▀ █████████   |
|  ██   ███████████  |
|   █████████▓▓▓▓██  |
|     ███████▓▓▓▓██  |
|     ███████▓▓▓▓█   |
|     ███████▓▓▄▀    |
|     ███████▄▀      |
|   █████████        |
|  ██   █████        |
|  █ ▄█▄ ████        |
|  █ ▀█▀ ████        |
|  ██   ████▀        |
|   ███████▀         |
|     █▒▒█▀          |
+--------------------+
+--------------------+
| i would prefer     |
| this text to       |
| follow directly    |
| after the text     |
| above, and avoid   |
| the vertical space |
| caused by the tall |
| image in the right |
| hand column        |
+--------------------+

但是如何在更大的屏幕上看起来像这样呢？

+--------------------++--------------------+
| some text that     ||     █▒▒███         |
| is placed in this  ||   ███████████      |
| column             ||  ██   ████████     |
+--------------------+|  █ ▄█▄ ████████    |
+--------------------+|  █ ▀█▀ █████████   |
| i would prefer     ||  ██   ███████████  |
| this text to       ||   █████████▓▓▓▓██  |
| follow directly    ||     ███████▓▓▓▓██  |
| after the text     ||     ███████▓▓▓▓█   |
| above, and avoid   ||     ███████▓▓▄▀    |
| the vertical space ||     ███████▄▀      |
| caused by the tall ||   █████████        |
| image in the right ||  ██   █████        |
| hand column        ||  █ ▄█▄ ████        |
+--------------------+|  █ ▀█▀ ████        |
                      |  ██   ████▀        |
                      |   ███████▀         |
                      |     █▒▒█▀          |
                      +--------------------+

Answer 1

一种解决方案是使用column来制作桌面布局，并使用flex column在移动设备上使用order重新排序元素。

＆＃13;

.special {
  columns: 2;
}
.special > div {
  display: inline-block;
  margin: 0 0 1em;
}

@media (max-width: 600px) {
  .special {
    display: flex;
    flex-direction: column;
  }
  .special > div:nth-child(1), .special > div:nth-child(3) {
    order: -1;
  }
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row special">
    <div>The first text on the page. The first text on the page. The first text on the page. The first text on the page. The first text on the page. The first text on the page.</div>
    <div>The text continues here. The text continues here. The text continues here. The text continues here. The text continues here. The text continues here. The text continues here. The text continues here.</div>
    <div>
      <img src="http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg" style="max-width: 100%">
    </div>
  </div>
</div>

＆＃13;

Bootstrap：避免由其他行中的单元格引起的单元格之间的垂直间隙

1 个答案: