Bootstrap我希望在桌面上有五列布局，但在移动设备上有两列

Question

我想在台式机上以4x5方式使用20个按钮，但需要移动10x2时尚。这是我的jfiddle

public string AddressLine1{ get; set; }

@Html.TextBoxFor(model => model.Listing.Location.AddressLine1, new { @class = "form-control" , placeholder = "Address Line 1 - Required" })

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

Answer 1

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

<强> Updated Fiddle

Stack Snippet

.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

Answer 2

你想要的是自定义。唯一的问题是：您是否希望列宽的此更改应用于所有页面/列或网站的特定部分？

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

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

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

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

然而，似乎仍然存在逻辑问题。你说你想要按钮分为：5 x 4大，2 x 10小。大。让我们从大的列中获取每个列的内容，并在移动设备上将它们很好地排列在两列中。我们在左边放第一，第三和第五列，在右边放第二和第四列。但是你想要将第5个内容分成两列，对吧？

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

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

＆＃13;

＆＃13;

.\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%;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

作为旁注，鉴于按钮的顺序并不重要，这里理智的方法是将所有按钮放在一列中并使用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);
  }
}

＆＃13;

＆＃13;

.\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);
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

或CSS列：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;