Bootstrap 列在移动设备上垂直堆叠 [英] Bootstrap columns stacking vertically on mobile device

问题描述

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

<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>

解决方案

列垂直堆叠，因为您使用的是 Bootstrap 4 和 -xs- 中缀不再使用.只需使用 col-4..

 
<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>

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

I have a simple bootstrap grid layout. I do not want the columns to stack vertically even on small devices.

<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>

解决方案

The columns are stacking vertically because you're using Bootstrap 4, and the -xs- infix is no longer used. Just use 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

这篇关于Bootstrap 列在移动设备上垂直堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！