引导网格，得到小于 col -xx-1

Question

使用 Bootstrap 并有由 4 个<div> 组成的行。我需要列出比 col-xx-1 多且少于 col-xx-2 的列。如何设置 col-xx-2 的一半并将剩余空间传递到下一个 div？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-3">
        first text here
      </div>
      <div class="col-sm-2">
        THIS ONE I NEED TO SET "COL-SM-1.5" to give more space for next div
      </div>
      <div class="col-sm-5">
        third text here
      </div>
      <div class="col-sm-1">
        forth text here
      </div>
      <div class="col-sm-1">
        forth text here
      </div>
    </div>
  </div>
</div>

Answer 1

通过提供额外的自定义类并将其添加到您的媒体查询很简单

.custom-width{
  width:15% !important;
}

以这样的方式调整你的宽度，这样它就不会溢出你的row

.col-sm-2,
.col-sm-3,
.col-sm-5,
.col-sm-1 {
  border: 1px solid;
}

@media only screen and (min-width: 768px) {
  /* Styles */
  .custom-width {
    width: 15% !important;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-3">
        first text here
      </div>
      <div class="col-sm-2 custom-width">
        THIS ONE I NEED TO SET "COL-SM-1.5" to give more space for next div
      </div>
      <div class="col-sm-5">
        third text here
      </div>
      <div class="col-sm-1">
        forth text here
      </div>
      <div class="col-sm-1">
        forth text here
      </div>
    </div>
  </div>
</div>

Answer 2

您可以在引导程序之上定义自己的类

Bootstrap 使用 12 列网格。您的总列数需要等于 12。您最初有 3+2+5+1+1 = 12。现在它的 3+1.5+5.5+1+1 = 12

我已将您原来的 col-sm 转换为 col-xs，因为它更易于在 stackoverflow 上阅读。原理是一样的

[class*=col]{
  box-sizing: border-box;
  border: 1px solid black;
}

.col-xs-15,
.col-xs-55 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
/*e.g. change this min-width depending on if you are using col-md, col-lg, etc*/
/*e.g. col-sm set min-width to 768px;*/
@media (min-width: 1px){ 
  .col-xs-15,
  .col-xs-55{
    float: left;
  }
  .col-xs-15 {
    width: 12.5%;
  }
  .col-xs-55 {
    width: 45.8333333333%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjxsfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- your original file, I fixed errors you had here (you forgot to specify one row)-->
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-3">
          first text here
        </div>
        <div class="col-xs-2">
          THIS ONE I NEED TO SET "COL-xs-1.5" to give more space for next div
        </div>
        <div class="col-xs-5">
          third text here
        </div>
        <div class="col-xs-1">
          forth text here
        </div>
        <div class="col-xs-1">
          forth text here
        </div>
      </div>
    </div>
  </div>
</div>

<br>
<br>

<!-- With changes -->
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-3">
          first text here
        </div>
        <div class="col-xs-15">
          THIS ONE I NEED TO SET "COL-xs-1.5" to give more space for next div
        </div>
        <div class="col-xs-55">
          third text here
        </div>
        <div class="col-xs-1">
          forth text here
        </div>
        <div class="col-xs-1">
          forth text here
        </div>
      </div>
    </div>
  </div>
</div>

我建议查看引导源代码以实现您自己的类 https://github.com/twbs/bootstrap/blob/v3.4.0-dev/dist/css/bootstrap.css

Answer 3

我认为您必须创建子列。

所以

 <div class="col-sm-12"> 
  <div class="col-sm-3">
    first text here
  </div>
  <div class="col-sm-7"> // Extend the length to combine the two rows
    <div class="col-sm-4"> // Gives 1/3 of the 8 length column
       THIS ONE IS "COL-SM-1.5ish"
    </div>
    <div class="col-sm-8"> // Gives 2/3 of the 8 length column.
    </div>
  </div>
  ...

我将 2 列组合在一起以使其成为 col-sm-7，然后在其中创建子列，从而为您在主列中提供更多的工作空间。您可以从那里进行相应的调整。

对不起，我不能给你一个 100% 正确的答案，我通常只是浏览答案，希望这可以帮助或指导你正确的方向。