Question

在下面的代码段中，我连续三列。第一个占行宽度的1/2。但是，可能情况是动态地将红色和蓝色列从DOM中删除或添加到DOM中。

Bootstrap中是否有某些选项，在这种情况下（一行中只有一个col-sm-6元素），该列仍会占据整个宽度吗？

我正在寻找一个CSS引导程序解决方案，在这种情况下，我想避免使用js；使用js，您可以轻松地动态添加props css类（col-sm6 / col-sm-12）。

.box {
  height: 50px;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class=container>
  <div class="row">
    <div class="col-sm-6">
      <div class="box" style="background-color:green;"></div>
    </div>
    <!--The following two columns are not always there (dynamically change). 
    If the following two columns are not part of the dom the green one should 
    automatically span the whole width. However if the two next columns are 
    present the green one should only take half of the row-->
    <div class="col-sm-3">
      <div class="box" style="background-color:red;"></div>
    </div>
    <div class="col-sm-3">
      <div class="box" style="background-color:blue;"></div>
    </div>
  </div>
  <br>
  <!-- the following row represents the case, where the two columns have been 
  removed from the dom. However, all classes and sytles used for the element:
  <div class="col-sm-6"> should be the same like above! -->
  <div class="row">
    <div class="col-sm-6">
      <div class="box" style="background-color:green;"></div>
    </div>
  </div>
</div>

Answer 1

您可以使用col-sm而不是col-sm-6来完成此操作，col-sm为列提供自动宽度
如果您希望第一列占行宽的1/2，可以通过添加CSS来做到这一点 min-width: 50%;进入该列，在下面查看我的代码段

.box {
  height: 50px;
  width: 100%;
}
.width--half {
  min-width: 50%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class=container>
  <div class="row">
    <div class="col-sm width--half">
      <div class="box" style="background-color:green;"></div>
    </div>
    <!--The following two columns are not always there (dynamically change). 
    If the following two columns are not part of the dom the green one should 
    automatically span the whole width. However if the two next columns are 
    present the green one should only take half of the row-->
    <div class="col-sm">
      <div class="box" style="background-color:red;"></div>
    </div>
    <div class="col-sm">
      <div class="box" style="background-color:blue;"></div>
    </div>
  </div>
  <br>
  <!-- the following row represents the case, where the two columns have been 
  removed from the dom. However, all classes and sytles used for the element:
  <div class="col-sm-6"> should be the same like above! -->
  <div class="row">
    <div class="col-sm-6">
      <div class="box" style="background-color:green;"></div>
    </div>
  </div>
</div>

如果总和小于12，则列的全宽

1 个答案: