如何使用multicol从包装中保留一行按钮和文本？

Question

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

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

Answer 1

首先，添加white-space: normal到 来覆盖bootstrap 类中的button默认nowrapbtn。

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

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

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

并使它们的间隔变得奇怪

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

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

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

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