html - 如何使用 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 添加到 button 以覆盖 Bootstrap btn nowrap类。

Unfortunately, in many cases, the button or the text gets broken in half when going into the next column. Using "display: inline-block" makes my buttons and text vary in size on different screen resolutions, and makes them spaced strangely.

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

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

and makes them spaced strangely

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