连续 9 divs，想在每个断点处丢失一个 div bootstrap

Question

我有 9 个 div 大小相同的一排。我使用的是最新版本的bootstrap 3.

我应该如何编写代码，以便在缩小屏幕时，在每个断点处恰好丢失一个 div，直到屏幕变为移动大小并恰好显示两个 div？

目前 bootstrap 我相信有四个断点，我是否必须使用媒体查询编写我自己的额外断点？我该怎么做？我想我总共需要大约八个断点。

Answer 1

那么就不要使用bootstrap!!!，而是使用float:left，让浏览器决定何时将溢出的div移到新行。

您也可以使用 display: inline-block; 来获得类似的效果，同时还能获得将它们（块）作为文本对齐的好处。

Demo

Answer 2

Bootstrap 默认只有 3 或 4 个断点。如果您有 9 列并希望以 2 列结尾，则需要 7 列，因此最好为这些列编写自己的查询（移动优先）。

就我个人而言，我会使用一些自定义样式自行处理列。通过使用类似于以下样式的东西，您最终会得到一组始终填充该行的列，即使您删除了一些列（或者如果您不太关心向后兼容性，请使用 flexbox）。注意：不要覆盖 Bootstrap 的类。

.row {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.column {
  display: table-cell;
}

现在您只需要一些隐藏第 n 个子项的媒体查询（将需要各种选择器）。

Answer 3

我个人避免使用 flexbox，因为它与我的自定义指令模板不兼容。您仍然可以使用 bootstrap 3 并添加样式和自定义查询以正确对齐。

<div class="container">
    <div class="row">
        <div id = "itemContainer" class="col-md-1"> One </div>
         ..................
        <div id = "itemContainer" class="col-md-1"> Six </div>
        <div id = "itemContainer" class="col-md-1"> Seven </div>
    </div>
 </div>


#itemContainer {
  height: 100px;
  border: 1px solid red;
  margin: 10px 10px 10px 20px;
  min-width: 100px;
  display: inline-block;
}

DEMO

连续 9 divs，想在每个断点处丢失一个 div bootstrap

9 divs in a row, want to lose one div at every breakpoint with bootstrap

css

twitter-bootstrap

responsive