显示 inline-flex 但保持全宽

Question

我将两个 div 放在一个 inline-flex div 中，两个 div 之一的宽度减小了。我正在使用引导程序：

<section>
  <div class="container">
    <div class="flexx">
      <div class="foo">
        ....
      </div>
      <div class="col-md-10">
        <div class="card">
          <div class="card-block">
            ...
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

基本上，foo 类应该与 col-md-10 内联，但 col-md-10 变小了，但仍应为 100%。我做对了吗？我不擅长 css/scss。

Answer 1

我不确定我是否完全理解您的问题。 inline-flex 项目不默认为全宽。您需要添加一些 css 来实现这一点，因为在 css for bootstrap 中 flex-grow 属性设置为 0；

如果我理解正确的话，我认为添加一种样式和一个类将解决您的问题。

// to your html
<div class="col foo">
    ....
</div>


// to your css
[class^="col"] {
   flex-grow: 1;
}

查看this pen 寻求帮助