在引导程序中自动调整列宽答案

【问题标题】：Automatically adjust column width in bootstrap在引导程序中自动调整列宽
【发布时间】：2018-05-11 17:29:51
【问题描述】：

我在设计方面不太擅长，而且我有一个设计问题拖了我好几个小时。如果有人可以帮助我，那将是不胜感激的。

我有一个 div 和一个 .container 类，在里面，我们有三个 div。一个是 .col-md-3 类，另一个是 .col-md-6 类，第三个是 .col-md-3 类。第三列根本不应该在那里。在某些情况下，只有第一个和第二个 div 会在那里。

如果不存在，我们可以让第二个div 占据第三个的空间吗？引导程序中有什么方法可以解决这个问题。

请帮助我。

【问题讨论】：

哪个版本的引导程序
版本为 Bootstrap 3
升级到 Bootstrap 4，那么答案是“是的，你可以这样做。”：getbootstrap.com/docs/4.1/layout/grid
使用bootstrap4，你可以做到
你能提供你的代码吗？

标签： html css twitter-bootstrap twitter-bootstrap-3 responsive-design

【解决方案1】：

您可以使用col 类到div。如果从row中删除一个div，它将自动调整

查看https://getbootstrap.com/docs/4.1/layout/grid/#equal-width了解更多信息

.col {
  background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.2);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

您可以通过从行中删除一列来检查

【讨论】：

【解决方案2】：

在 bootstrap 3 上添加一些自定义 CSS。

请以全页模式查看

$('button').click(function(){
    $('#toggle_col').toggle();
});

.col-sm-3 {
  background-color: red;
}

.col-sm-6 {
  background-color: blue;
}

/* this will do the trick */

@media (min-width: 768px)
  .flex-row {
    display: flex;
    flex-wrap: wrap;
  }
}

.flex-col {
 flex: 1 0 auto;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row flex-row">
 <div class="col-sm-3">3</div>
 <div class="col-sm-6 flex-col">6</div>
 <div class="col-sm-3" id="toggle_col">3</div>
 </div>
</div>

<button>Toggle Column</button>

【讨论】：