Question

我有以下引导程序标记为html

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-md-6">
      <div class="col col-xs-12">
        <div>a</div>
        <div>b</div>
        <div>c</div>
      </div>
      <div class="col col-xs-12">
        <div>d</div>
        <div>e</div>
        <div>f</div>
      </div>
    </div>
    <div class="col col-md-6">
      <div class="col col-xs-12">
        <div>g</div>
        <div>h</div>
        <div>i</div>
      </div>
      <div class="col col-xs-12">
        <div>j</div>
        <div>k</div>
        <div>l</div>
      </div>
    </div>
  </div>
</div>

https://www.bootply.com/blyGjCAkjr

我希望我的数据按照示例垂直列出，以便第二个元素位于第一个元素之下，第三个元素位于第二个元素之下等等。

a
b
c
d
e
f
g
h
i
j
k
l

当浏览器尺寸较宽时，我希望数据列在两列中，但仍按垂直顺序排列

a   g
b   h
c   i
d   j
e   k
f   l

到目前为止我有这个工作，但我不确定这是实现它的最佳方法。另外，我想进一步扩展它，以便它可以切换到3列

a   e   i
b   f   j
c   g   k
d   h   l

和4列，因为浏览器的大小更宽，同时也保持元素垂直方向。

a   d   g   j
b   e   h   k
c   f   i   l

显然，以这种方式切换1到2列是可能的，因为我已经完成了。是否也可以仅使用bootstrap切换到3列和4列？

Answer 1

我建议你使用flexbox而不是bootstrap。它是一个非常强大的css网格系统。您可以在一行中显示3,4,5,6列。你也可以轻松应对响应。 Here is a link to an article.

使引导列垂直定向而不是水平

1 个答案: