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>

Answer 1

bs4中没有xs，也应该为row设置一个col-*包装器div

使用此功能（此处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>

Bootstrap 4-两个列无法在移动设备上使用

1 个答案: