Question

使用Bootstrap并拥有包含4 y的行。我需要的列更多是col-xx-1而不是col-xx-2。如何将col-xx-2和剩余空间的一半设置为下一个div？

<div>

Answer 1

您可以在bootstrap

之上定义自己的类

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>

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

Answer 2

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

来简单

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

调整宽度，使其不会溢出row

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap网格，小于col -xx-1

2 个答案: