如何使列大小小于col-xx-1

Question

这是我的输出:http://jsbin.com/zuxipa/1/

基本上,我希望行内的第二个div更小(它目前在col-md-1).我怎么能这样做？

Answer 1

我不确定当时是否可能，但现在可以了。

<div class="content">
  <div class="row">
      <div class="col-auto p-1"><i class="fa fa-envelope" aria-hidden="true"></i></div>
      <div class="col-8 p-1">You sent a message to Shanice</div>
      <div class="col">
        <button type="button" class="btn btn-primary">Resend</button>
      </div>
  </div>
</div>

col-auto：让列尽可能小 - 它足够大以容纳其中的内容。请参阅https://getbootstrap.com/docs/4.0/layout/grid/#variable-width-content

p-1：给它几乎尽可能小的填充。p-0对于我的需要来说太小了。请参阅https://getbootstrap.com/docs/4.0/utilities/spacing/#notation

Answer 2

<div class="col-md-1"></div>如果用行包装它们,可以将列嵌套在其中

例:

<div class="col-md-1">
   <div class="row">
      <div class="col-md-6">
          2.1 col
      </div>
   </div>
</div>

http://getbootstrap.com/css/#grid-nesting