如何使用 multicol 保持一行按钮和文本不换行？答案

【问题标题】：How can I keep a row of a button and text from wrapping using multicol?如何使用 multicol 保持一行按钮和文本不换行？
【发布时间】：2018-03-03 11:48:12
【问题描述】：

我有一系列由按钮和文本组成的行，如下所示：

[Button] [Text]
[Button] [Text]
[Button] [Text]
...

当我应用 multicol 类时，它们最终会环绕，如下所示：

[Button] [Text]   [Button] [Text]
[Button] [Text]   ....

不幸的是，在许多情况下，按钮或文本在进入下一列时会被分成两半。 使用“display: inline-block” 使我的按钮和文本在不同的屏幕分辨率上大小不一，并使它们的间距奇怪。

什么是防止[Button] [Text] 组合在列中中断，同时保持每个[Button] [Text] 组合等间距且看起来相同的最佳方法？

.multicol {
  column-count:2;
  -moz-column-count:2;
  -webkit-column-count:2;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- Imagine 20-25 of these in a row -->
  <div class='multicol'>
     <div class='row'>
         <div class='col-xs-5'>
              <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
          </div>
          <div class='col-xs-7'>
               <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
           </div>
      </div>
  </div>

【问题讨论】：

明确地说，您尝试在.row 上使用display: inline-block，对吗？如果是这样，为什么它会影响您的文本大小？这似乎很奇怪。我的第一直觉是你应该解决这个问题，然后使用inline-block。
@cjl750 它不会影响我的文字大小，而是Button和Text之间的间距不一致。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

首先，将white-space: normal 添加到button 以覆盖引导程序btn 类中的默认nowrap。

不幸的是，在许多情况下，按钮或文本被破坏进入下一列时减半。使用“显示：内联块” 使我的按钮和文本在不同屏幕上的大小不同分辨率，并使它们的间距奇怪。

好吧，您可以使用以下方法避免中断到下一列：

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */

让它们的间距很奇怪

添加column-gap: 0 以删除默认列间隙。

.multicol {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-gap: 0;
}

.multicol button {
  white-space: normal;
}

.multicol>.row {
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+ */
}

/*for illustration*/
.multicol>.row>* {
  border: 1px solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Imagine 20-25 of these in a row -->
<div class='multicol'>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
</div>

现在您可以在此处添加一些 flexboxes 以适合您的情况 - 请参见下面的演示：

.multicol {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-gap: 0;
}

.multicol button {
  white-space: normal;
}

.multicol>.row {
  display: flex; /*NEW*/
  margin: 0; /*NEW*/
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+ */
}

.multicol p { /*NEW*/
  height: 100%;
}

/*for illustration*/
.multicol>.row>* {
  border: 1px solid;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Imagine 20-25 of these in a row -->
<div class='multicol'>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-5'>
      <button class='btn btn-block' style='min-width: 100px;'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
    </div>
    <div class='col-xs-7'>
      <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
    </div>
  </div>
</div>

【讨论】：