无论屏幕分辨率如何，我如何才能让按钮和文本填充列呢？

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

长按钮文本可能会中断到第二行，但按钮宽度将保持一致。

Answer 2

我认为你正在努力实现这样的目标：

​

.col {
    width: 50%;
    float: left;
}
button {
    width: 80px;
    height: 22px;
}

<!-- Imagine 20-25 of these in a row -->
  <div>
     <div class="col">
         <button>One</button>
         <span>Description one</span>
     </div>
     <div class="col">
         <button>One</button>
         <span>Description one</span>
     </div>
     
  </div>

​

Answer 3

CSS中有一个相对于viewport的单元。您可以使用vw表示视口宽度，使用vh表示视图端口高度。

例如，如果您希望有一个宽度与视口相同的元素，那么将元素样式如下：

element {
    width: 100vw;
}