html - 无论屏幕分辨率如何，如何让我的按钮和文本填充该列？

Question

这让我发疯了。我希望两个并排的列像这样工作:

[Button] [Long text description]       [Button] [Long text description]

我希望按钮具有相同的宽度，并且文本不会渗入右侧的列中。我试着这样实现:

multicol {
  display: inline-block;
  column-count:2;
  -moz-column-count:2;
  -webkit-column-count:2;
 
}

  <!-- Imagine 20-25 of these in a row -->
  <div class='container-fluid multicol'>
     <div class='row'>
         <div class='col-xs-5'>
              <button class='btn btn-block'>  (VARYING-LENGTH BUTTON NAMES HERE) </button>
          </div>
          <div class='col-xs-7'>
               <p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
           </div>
      </div>
  </div>

但是我的按钮开始根据不同的屏幕分辨率调整大小，而且它们的大小并不总是相同。无论屏幕分辨率如何，如何确保按钮始终具有相同的宽度(整列)？

Answer 1

container-fluid 设置为整个浏览器的宽度，因此 col-xs-5 元素将始终变化，因为它将是浏览器宽度。 btn-block 将确保按钮是变量 col-xs-5 宽度的 100%。

如果你希望按钮元素的宽度与屏幕分辨率无关，我建议给按钮元素一个明确的宽度，

例如

button {
  width: 200px;
}

长按钮文本可能会换行，但按钮宽度将保持一致。