html – 如何使用multicol保存一行按钮和文本？

发布时间：2020-12-14 16:36:55 所属栏目：资源来源：网络整理

导读：我有一系列由按钮和文本组成的行,如下所示： [Button] [Text][Button] [Text][Button] [Text]... 当我应用multicol类时,它们最终会环绕,如下所示： [Button] [Text] [Button] [Text][Button] [Text] .... 不幸的是,在许多情况下,当进入下一列时,按钮或文本会

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

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

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

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

不幸的是,在许多情况下,当进入下一列时,按钮或文本会被分成两半.使用“display：inline-block”可以使我的按钮和文本在不同的屏幕分辨率上大小不一,并使它们间隔得很奇怪.

保持[按钮] [文本]组合在列中断开的最佳方法是什么,同时保持每个[按钮] [文本]组合等间距,并且看起来相同？

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

解决方法

首先,添加了white-space：垂直于按钮以覆盖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,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>

现在您可以在这里添加一些flexbox来满足您的需求 – 请参阅下面的演示：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!