Question

我在div inline-flex内放置了两个div，两个div中的一个宽度减少了。我正在使用bootstrap：

<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的bootstrap中，flex-grow属性设置为0;

如果我理解你的话，我认为添加一种风格和一种类会解决你的问题。

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


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

查看this pen以获取帮助

显示内联 - 柔性但保持全宽

1 个答案: