Bootstrap 具有动态宽度的并排列

Question

我在 bootstrap 中有一个两列框。两个专栏都应包含动态内容。第二列应该与第一列相邻。如果列宽超过了外部 div 的总宽度，第一列应该只占用剩余的 space。请参阅随附的屏幕截图以获得更好的说明。

预期输出

我在项目中使用bootstrap 4.6.1 框架。我尝试了各种方法，包括 CSS3 flex、grid 等。这是我现在的代码，

<div class="container-fluid">
  <div class="row">
    <div class="col-auto box">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="col-auto box">Lorem Ipsum</div>
  </div>
  <br/><br/>
  <div class="row">
    <div class="col-auto box">
        <div class="inner">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae distinctio molestias nulla, voluptatum ut nesciunt, in. Deserunt optio inventore animi officia alias cumque incidunt! Alias impedit dolores velit recusandae blanditiis!

        </div>
      </div>
    <div class="col-auto box">Lorem Ipsum dolor sit, consectetur adipisicing elit</div>
  </div>
</div>

This is the link to the jsfiddle

但找不到解决方案。谁能帮帮我？

Answer 1

您可以将 class flex-nowrap 添加到您的行中：

.box {
  border: 1px solid red;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 15px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row flex-nowrap">
    <div class="truncate box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae distinctio molestias nulla, voluptatum ut nesciunt, in. Deserunt optio inventore animi officia alias cumque incidunt! Alias impedit dolores velit recusandae blanditiis!</div>
    <div class="col-auto box">Lorem Ipsum dolor sit, consectetur adipisicing elit</div>
  </div>
  <br />
  <div class="row flex-nowrap">
    <div class="truncate box">Lorem ipsum dolor sit amet</div>
    <div class="col-auto box">Lorem Ipsum dolor sit, consectetur adipisicing elit</div>
  </div>
</div>

Bootstrap 具有动态宽度的并排列

Bootstrap side by side column with dynamic width

html

css

flexbox

css-grid

bootstrap-4