Question

基本上，我希望行内的第二个div更小（它目前在col-md-1）。我怎么能这样做？

Answer 1

如果用行包裹

，可以在<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

Answer 2

我知道现在已经很晚了，但是我正在寻找解决这个问题的方法并遇到了这个问题，所以我想我会分享我的解决方案。

据我所知，在Bootstrap中没有默认的方法来处理这种情况。我所做的是删除了.col-x类，但保留了row类。然后我在部分中添加了一个自定义类，并使用了我正在处理的行的百分比宽度。我最终得到了以下内容：

<style>
    .section-1, .section-3 {
        width: 47%;
    }
    .section-2 {
        width: 6%;
    }
</style>

<div class="container">
    <div class="row">
        <div class="section-1">
            <!-- Content Here -->
        </div>
        <div class="section-2">
            <!-- Content Here -->
        </div>
        <div class="section-3">
            <!-- Content Here -->
        </div>
    </div>
</div>

请注意，默认情况下这没有响应，但在CSS中使用媒体查询调整宽度百分比会很容易。

Answer 3

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

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

你好，我为你做了。将您的班级放入div，现在比以前短了

示例：col-custom-1 < col-xx-1

.col-custom-1{
  flex: 0 0 4.16666%;
  max-width: 4.16666%;
}
.col-custom-2{
  flex: 0 0 8.3333%;
  max-width: 8.3333%;
}
.col-custom-3{
  flex: 0 0 12.5%;
  max-width: 12.5%;
}
.col-custom-4{
  flex: 0 0 16.6666%;
  max-width: 16.6666%;
}
.col-custom-5{
  flex: 0 0 20.83333%;
  max-width: 20.83333%;
}
.col-custom-6{
  flex: 0 0 25%;
  max-width: 25%;
}
.col-custom-7{
  flex: 0 0 29.1666666667%;
  max-width: 29.1666666667%;
}
.col-custom-8{
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}
.col-custom-9{
  flex: 0 0 37.5%;
  max-width: 37.5%;
}
.col-custom-10{
  flex: 0 0 41.6666%;
  max-width: 41.6666%;
}
.col-custom-11{
  flex: 0 0 45.83333%;
  max-width: 45.83333%;
}
.col-custom-12{
  flex: 0 0 50%;
  max-width: 50%;
}
.col-custom-13{
  flex: 0 0 54.16666%;
  max-width: 54.16666%;
}
.col-custom-14{
  flex: 0 0 58.33333%;
  max-width: 58.33333%;
}
.col-custom-15{
  flex: 0 0 62.50000%;
  max-width: 62.50000%;
}
.col-custom-16{
  flex: 0 0 66.6666%;
  max-width: 66.6666%;
}
.col-custom-17{
  flex: 0 0 70.83333%;
  max-width: 70.83333%;
}
.col-custom-18{
  flex: 0 0 75.0000%;
  max-width: 75.0000%;
}
.col-custom-19{
  flex: 0 0 79.16666%;
  max-width: 79.16666%;
}
.col-custom-20{
  flex: 0 0 83.3333%;
  max-width: 83.3333%;
}
.col-custom-21{
  flex: 0 0 87.50000%;
  max-width: 87.50000%;
}
.col-custom-22{
  flex: 0 0 91.6666%;
  max-width: 91.6666%;
}
.col-custom-23{
  flex: 0 0 95.83333%;
  max-width: 95.83333%;
}
.col-custom-24{
  flex: 0 0 100%;
  max-width: 100%;
}

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

4 个答案: