twitter-bootstrap - Bootstrap 4 - 两个列在移动设备上不起作用

Question

我有一排在中大屏幕上看起来不错的按钮。

我正在使用 Bootstrap 4，我希望这些按钮在移动设备上移动到两列中。

我添加了 xs 和 sm col 6 所以不确定问题出在哪里：

<div class = "container-fluid">
    <div class = "col-xs-6 col-sm-6 col-md-12 col-lg-12">
        <button> Biz </button>
        <button> Charity </button>
        <button> Health </button>
        <button> Media </button>
        <button> Politics </button>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
        <button> Tech </button>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
    </div>
</div>  

标签： twitter-bootstrapbootstrap-4

Answer 1

bs4中没有xs，你也应该有一个row包装器divcol-*

使用它（这里col-lg-12是多余的，因为col-md-12样式将应用于所有更高的视口，除非您需要为大视口和超大视口设置不同的布局）

<div class="row">
    <div class = "col-6 col-md-12 col-lg-12">Col 1</div>
    <div class = "col-6 col-md-12 col-lg-12">Col 2</div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-6 col-md-12">
      <button> Biz </button>
      <button> Charity </button>
      <button> Health </button>
    </div>
    <div class="col-6 col-md-12">
      <button> Media </button>
      <button> Politics </button>
      <button> Tech </button>
    </div>
  </div>
</div>