Bootstrap 我想在桌面上有五列布局，但在移动设备上有两列答案

【问题标题】：Bootstrap I want to have a five column layout on desktop but two columns on mobileBootstrap 我想在桌面上有五列布局，但在移动设备上有两列
【发布时间】：2018-07-07 05:33:10
【问题描述】：

我想要 20 个 4x5 方式的按钮在桌面上，但在移动 10x2 方式上。这是我的jfiddle

<div class="container">
  <div class="col-md-12">
    <button type="button" style="background-color:white" class="btn btn-default btn-square">white</button>
    <button type="button" style="background-color:#F7F6E4" class="btn btn-default btn-square">Beige</button>
    <button type="button" style="background-color:#3BA6F8" class="btn btn-default btn-square">Blau</button>
    <button type="button" style="background-color:#F36660" class="btn btn-default btn-square">Rot</button>
    <button type="button" style="background-color:#FDFCEA" class="btn btn-default btn-square">Creme</button>
  </div>
  <div class="col-md-12">
    <button type="button" style="background-color:#DBDBDB" class="btn btn-default btn-square">Graue</button>
    <button type="button" style="background-color:#E6C08E" class="btn btn-default btn-square">Eiche</button>
    <button type="button" style="background-color:#358B9F" class="btn btn-default btn-square">Petrol</button>
    <button type="button" style="background-color:#FF7ECD" class="btn btn-default btn-square">Rosa</button>
    <button type="button" style="background-color:#C9C9C9" class="btn btn-default btn-square">Silber</button>
  </div>
  <div class="col-md-12">
    <button type="button" style="background-color:#505558;color:white;" class="btn btn-default btn-square">Anthrazit</button>
    <button type="button" style="background-color:C39881" class="btn btn-default btn-square">Taupe</button>
    <button type="button" style="background-color:#569A9E" class="btn btn-default btn-square">Trukis</button>
    <button type="button" style="background-color:#A03A97" class="btn btn-default btn-square">Lila</button>
    <button type="button" style="background-color:#FFDB53" class="btn btn-default btn-square">Gold</button>
  </div>
  <div class="col-md-12">
    <button type="button" style="background-color:#2E2E2E;color:white;" class="btn btn-default btn-square">Schwarz</button>
    <button type="button" style="background-color:#A16340" class="btn btn-default btn-square">Braun</button>
    <button type="button" style="background-color:#C9DDA8" class="btn btn-default btn-square">Grun</button>
    <button type="button" style="background-color:#FFB24A" class="btn btn-default btn-square">Orange</button>
    <button type="button" style="background-color:#FFFD5E" class="btn btn-default btn-square">Gelb</button>
  </div>
</div>

我在网上找不到任何有用的东西。我在这里没有使用任何技巧。基本上我使用的是按钮大小，因此它出现在 5 列中，然后它应该出现在移动设备上的 2 列中，但它不起作用。

【问题讨论】：

那么升级到 V4 的 bootstrap 呢？这会很容易
我更喜欢 v3 解决方案，但如果存在 v4 解决方案，为什么不呢！谢谢
在 Bootstrap v3 和 v4 中有很多方法可以得到这个。虽然在 v4 中开箱即用肯定更容易，但如果您查看它，自定义 Bootstrap 以使用自定义列数是相当简单的。如果您不希望在站点范围内进行此更改，则始终可以覆盖特定（一组）列的宽度，使用父选择器将此覆盖限制为所需部分。 “我在网上找不到任何有用的东西” 不能算是体面的研究。以目前的形式，这个问题看起来你今天不想工作，并认为你会在这里碰碰运气，也许你很幸运。
修复了“col-med-12”。好吧，我认为这很容易，但它比我想象的要复杂。如果您找到快速解决方案，请不要分享链接。我找不到任何东西（不是我花了几天时间在上面）。
恐怕我看错了你的问题。我刚刚意识到您不想要 5 列布局，如标题所述，而是 4 列布局，如问题正文所述。我会相应地更新我的答案。

标签： html css twitter-bootstrap layout responsive-design

【解决方案1】：

如果您想编写更少的代码并避免使用这么多 col-* 类...使用 Flexbox

Updated Fiddle

堆栈片段

.btn-row {
  display: flex;
  flex-wrap: wrap;
}

.btn.btn-square {
  flex: 0 0 calc(20% - 10px);
  border-radius: 0;
  margin: 5px;
}

@media (max-width:576px) {
  .btn.btn-square {
    flex: 0 0 calc(50% - 10px);
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<h1 class="text-center">Bootstrap Buttons</h1>
<div class="container">
  <div class="btn-row">
    <button type="button" style="background-color:white" class="btn btn-default btn-square col-md">white</button>
    <button type="button" style="background-color:#F7F6E4" class="btn btn-default btn-square">Beige</button>
    <button type="button" style="background-color:#3BA6F8" class="btn btn-default btn-square">Blau</button>
    <button type="button" style="background-color:#F36660" class="btn btn-default btn-square">Rot</button>
    <button type="button" style="background-color:#FDFCEA" class="btn btn-default btn-square">Creme</button>
    <button type="button" style="background-color:#DBDBDB" class="btn btn-default btn-square">Graue</button>
    <button type="button" style="background-color:#E6C08E" class="btn btn-default btn-square">Eiche</button>
    <button type="button" style="background-color:#358B9F" class="btn btn-default btn-square">Petrol</button>
    <button type="button" style="background-color:#FF7ECD" class="btn btn-default btn-square">Rosa</button>
    <button type="button" style="background-color:#C9C9C9" class="btn btn-default btn-square">Silber</button>
    <button type="button" style="background-color:#505558;color:white;" class="btn btn-default btn-square">Anthrazit</button>
    <button type="button" style="background-color:C39881" class="btn btn-default btn-square">Taupe</button>
    <button type="button" style="background-color:#569A9E" class="btn btn-default btn-square">Trukis</button>
    <button type="button" style="background-color:#A03A97" class="btn btn-default btn-square">Lila</button>
    <button type="button" style="background-color:#FFDB53" class="btn btn-default btn-square">Gold</button>
    <button type="button" style="background-color:#2E2E2E;color:white;" class="btn btn-default btn-square">Schwarz</button>
    <button type="button" style="background-color:#A16340" class="btn btn-default btn-square">Braun</button>
    <button type="button" style="background-color:#C9DDA8" class="btn btn-default btn-square">Grun</button>
    <button type="button" style="background-color:#FFB24A" class="btn btn-default btn-square">Orange</button>
    <button type="button" style="background-color:#FFFD5E" class="btn btn-default btn-square">Gelb</button>
  </div>
</div>

使用 bootstrap3

使用 bootstrap3，您必须使用 col-offset 类来连续对齐 5 个元素。

Fiddle Link

【讨论】：

真的很好，但是有可能在纯引导中做到这一点
@hmd 在 bootstrap4 中这很容易......但是对于 bootstrap3，你必须编写额外的代码，因为在 bootstrap3 中没有 col-* 类附带 width:20%....你必须你自己的自定义类..
你能在 bootstrap 4 中提供一个单独的答案吗？
@hmd 上面的解决方案使用了bootstrap4的概念......你可以在bootstrap grid找到更多......getbootstrap.com/docs/4.0/layout/grid
@hmd 在 bootstrap4 中也没有 width:20% 的类......所以你必须在 bootstrap4 的情况下编写自定义......问题是 bootstrap4 也使用 flexbox 布局，所以它变得很容易对齐其中的项目......我希望它会帮助你......

【解决方案2】：

您想要的是定制。唯一的问题是：您是否希望将列宽的这种更改应用于所有页面/列或站点的特定部分？

对于全站更改的列数，转到https://getbootstrap.com/docs/3.3/customize/#grid-system，将12 更改为10 并下载结果。

如果您只想将其应用于特定部分，首先在.container 和.col-*-* 之间添加一个.row（这很重要）。其次，为您的.row 添加一个类，以将其与您网站中的其他.rows 区分开来。对于这个例子，我使用了 10-cols 类：

并将其添加到您的 CSS 中，以覆盖这些列的宽度：

.\31\30-cols > * {
  width: 50%;
}
@media (min-width: 992px) {
  .\31\30-cols > * {
    width: 20%;
  }
}

但是，似乎仍然存在逻辑问题。您说您希望将按钮划分为：5 x 4 大号和 2 x 10 小号。伟大的。让我们从大的每个列的内容中提取它们，并在移动设备上将它们很好地排列在两列中。我们把第一、三、五列放在左边，把第二、四列放在右边。但是您希望将 5th 的内容分成两列，对吗？

~~因此，您可能希望将所有按钮放在一个元素中，并使用 flexbox 或 CSS 列来根据需要显示它们。~~

因此您需要在移动设备上将此列显示为全宽，并将其内容进一步分为两列：

.\31\30-cols > [class^="col-md"] {
  width: 50%;
}

.\31\30-cols > .col-xs-12 {
  width: 100%;
}

@media (min-width: 992px) {
  .\31\30-cols > [class^="col-md"] {
    width: 20%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row 10-cols">
    <div class="col-md-12 col-xs-6">
      <button type="button" style="background-color:white" class="btn btn-block btn-default btn-square">white</button>
      <button type="button" style="background-color:#F7F6E4" class="btn btn-block btn-default btn-square">Beige</button>
      <button type="button" style="background-color:#3BA6F8" class="btn btn-block btn-default btn-square">Blau</button>
      <button type="button" style="background-color:#F36660" class="btn btn-block btn-default btn-square">Rot</button>
    </div>
    <div class="col-md-12 col-xs-6">
      <button type="button" style="background-color:#FDFCEA" class="btn btn-block btn-default btn-square">Creme</button>
      <button type="button" style="background-color:#DBDBDB" class="btn btn-block btn-default btn-square">Graue</button>
      <button type="button" style="background-color:#E6C08E" class="btn btn-block btn-default btn-square">Eiche</button>
      <button type="button" style="background-color:#358B9F" class="btn btn-block btn-default btn-square">Petrol</button>
    </div>
    <div class="col-md-12 col-xs-6">
      <button type="button" style="background-color:#FF7ECD" class="btn btn-block btn-default btn-square">Rosa</button>
      <button type="button" style="background-color:#C9C9C9" class="btn btn-block btn-default btn-square">Silber</button>
      <button type="button" style="background-color:#505558;color:white;" class="btn btn-block btn-default btn-square">Anthrazit</button>
      <button type="button" style="background-color:C39881" class="btn btn-block btn-default btn-square">Taupe</button>
    </div>
    <div class="col-md-12 col-xs-6">
      <button type="button" style="background-color:#569A9E" class="btn btn-block btn-default btn-square">Trukis</button>
      <button type="button" style="background-color:#A03A97" class="btn btn-block btn-default btn-square">Lila</button>
      <button type="button" style="background-color:#FFDB53" class="btn btn-block btn-default btn-square">Gold</button>
      <button type="button" style="background-color:#2E2E2E;color:white;" class="btn btn-block btn-default btn-square">Schwarz</button>
    </div>
    <div class="col-md-12 col-xs-12">
      <div class="row">
        <div class="col-xs-6 col-md-12">
          <button type="button" style="background-color:#A16340" class="btn btn-block btn-default btn-square">Braun</button>
          <button type="button" style="background-color:#C9DDA8" class="btn btn-block btn-default btn-square">Grun</button>
        </div>
        <div class="col-xs-6 col-md-12">
          <button type="button" style="background-color:#FFB24A" class="btn btn-block btn-default btn-square">Orange</button>
          <button type="button" style="background-color:#FFFD5E" class="btn btn-block btn-default btn-square">Gelb</button>
        </div>
      </div>
    </div>
  </div>
</div>

作为旁注，考虑到按钮的顺序并不是很重要，这里的明智方法是将所有按钮放在一列中，并使用任一 flexbox 排列它们：

.\31\30-cols .col-xs-12 {
  display: flex;
  flex-wrap: wrap;
}
.\31\30-cols .col-xs-12 .btn {
  flex: 1 0 calc(50% - 20px);
  margin: 5px;
}
@media (min-width: 992px) {
  .\31\30-cols .col-xs-12 .btn {
    flex-basis: calc(20% - 10px);
  }
}

.\31\30-cols .col-xs-12 {
  display: flex;
  flex-wrap: wrap;
}
.\31\30-cols .col-xs-12 .btn {
  flex: 1 0 calc(50% - 20px);
  margin: 5px;
}
@media (min-width: 992px) {
  .\31\30-cols .col-xs-12 .btn {
    flex-basis: calc(20% - 10px);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row 10-cols">
    <div class="col-xs-12">
      <button type="button" style="background-color:white" class="btn btn-block btn-default btn-square">white</button>
      <button type="button" style="background-color:#F7F6E4" class="btn btn-block btn-default btn-square">Beige</button>
      <button type="button" style="background-color:#3BA6F8" class="btn btn-block btn-default btn-square">Blau</button>
      <button type="button" style="background-color:#F36660" class="btn btn-block btn-default btn-square">Rot</button>
      <button type="button" style="background-color:#FDFCEA" class="btn btn-block btn-default btn-square">Creme</button>
      <button type="button" style="background-color:#DBDBDB" class="btn btn-block btn-default btn-square">Graue</button>
      <button type="button" style="background-color:#E6C08E" class="btn btn-block btn-default btn-square">Eiche</button>
      <button type="button" style="background-color:#358B9F" class="btn btn-block btn-default btn-square">Petrol</button>
      <button type="button" style="background-color:#FF7ECD" class="btn btn-block btn-default btn-square">Rosa</button>
      <button type="button" style="background-color:#C9C9C9" class="btn btn-block btn-default btn-square">Silber</button>
      <button type="button" style="background-color:#505558;color:white;" class="btn btn-block btn-default btn-square">Anthrazit</button>
      <button type="button" style="background-color:C39881" class="btn btn-block btn-default btn-square">Taupe</button>
      <button type="button" style="background-color:#569A9E" class="btn btn-block btn-default btn-square">Trukis</button>
      <button type="button" style="background-color:#A03A97" class="btn btn-block btn-default btn-square">Lila</button>
      <button type="button" style="background-color:#FFDB53" class="btn btn-block btn-default btn-square">Gold</button>
      <button type="button" style="background-color:#2E2E2E;color:white;" class="btn btn-block btn-default btn-square">Schwarz</button>
      <button type="button" style="background-color:#A16340" class="btn btn-block btn-default btn-square">Braun</button>
      <button type="button" style="background-color:#C9DDA8" class="btn btn-block btn-default btn-square">Grun</button>
      <button type="button" style="background-color:#FFB24A" class="btn btn-block btn-default btn-square">Orange</button>
      <button type="button" style="background-color:#FFFD5E" class="btn btn-block btn-default btn-square">Gelb</button>
    </div>
  </div>
</div>

或 CSS 列：

.\31\30-cols .col-xs-12 {
  columns: 2;
  column-gap: 10px;
}
@media (min-width: 992px) {
  .\31\30-cols .col-xs-12 {
    columns: 5;
  }
}

.\31\30-cols .col-xs-12 {
  columns: 2;
  column-gap: 10px;
}
@media (min-width: 992px) {
  .\31\30-cols .col-xs-12 {
    columns: 5;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row 10-cols">
    <div class="col-xs-12">
      <button type="button" style="background-color:white" class="btn btn-block btn-default btn-square">white</button>
      <button type="button" style="background-color:#F7F6E4" class="btn btn-block btn-default btn-square">Beige</button>
      <button type="button" style="background-color:#3BA6F8" class="btn btn-block btn-default btn-square">Blau</button>
      <button type="button" style="background-color:#F36660" class="btn btn-block btn-default btn-square">Rot</button>
      <button type="button" style="background-color:#FDFCEA" class="btn btn-block btn-default btn-square">Creme</button>
      <button type="button" style="background-color:#DBDBDB" class="btn btn-block btn-default btn-square">Graue</button>
      <button type="button" style="background-color:#E6C08E" class="btn btn-block btn-default btn-square">Eiche</button>
      <button type="button" style="background-color:#358B9F" class="btn btn-block btn-default btn-square">Petrol</button>
      <button type="button" style="background-color:#FF7ECD" class="btn btn-block btn-default btn-square">Rosa</button>
      <button type="button" style="background-color:#C9C9C9" class="btn btn-block btn-default btn-square">Silber</button>
      <button type="button" style="background-color:#505558;color:white;" class="btn btn-block btn-default btn-square">Anthrazit</button>
      <button type="button" style="background-color:C39881" class="btn btn-block btn-default btn-square">Taupe</button>
      <button type="button" style="background-color:#569A9E" class="btn btn-block btn-default btn-square">Trukis</button>
      <button type="button" style="background-color:#A03A97" class="btn btn-block btn-default btn-square">Lila</button>
      <button type="button" style="background-color:#FFDB53" class="btn btn-block btn-default btn-square">Gold</button>
      <button type="button" style="background-color:#2E2E2E;color:white;" class="btn btn-block btn-default btn-square">Schwarz</button>
      <button type="button" style="background-color:#A16340" class="btn btn-block btn-default btn-square">Braun</button>
      <button type="button" style="background-color:#C9DDA8" class="btn btn-block btn-default btn-square">Grun</button>
      <button type="button" style="background-color:#FFB24A" class="btn btn-block btn-default btn-square">Orange</button>
      <button type="button" style="background-color:#FFFD5E" class="btn btn-block btn-default btn-square">Gelb</button>
    </div>
  </div>
</div>

【讨论】：