Bootstrap列垂直堆叠在移动设备上

时间:2017-04-30 12:13:34

标签: html twitter-bootstrap bootstrap-4

我有一个简单的bootstrap网格布局。即使在小型设备上,我也不希望列垂直堆叠。

<div class="container">
<div class="row">
  <div class="col-sm-4 col-xs-4 col-md-4">1</div>
  <div class="col-sm-4 col-xs-4 col-md-4">2</div>
  <div class="col-sm-4 col-xs-4 col-md-4">3</div>
</div>

2 个答案:

答案 0 :(得分:1)

列正在垂直堆叠,因为您使用的是 Bootstrap 4 ,并且不再使用-xs-中缀。只需使用col-4 ..

  <div class="container border-show center-div">
    <div class="row">
      <div class="col-4 border-show">1</div>
      <div class="col-4 border-show">2</div>
      <div class="col-4 border-show">3</div>
    </div>
  </div>

http://www.codeply.com/go/sCct2CzZte

答案 1 :(得分:-1)

我无法解决这个问题,因为您发布的HTML完全符合您的要求:它永远不会为该行垂直堆叠列。

你能否澄清一下你要问的问题?有关如何提出好问题的参考,请参阅How To Ask