Bootstrap 4 - 如何适应列的内容大小？

Question

我确实有这种情况：[！[在此处输入图像描述][1]][1]

我想要的是：

• 第 1 点：使列宽适合内容/在这种情况下适合图像。

• 第 2 步：使列宽适合文本“内容标题”

• 第 3 号：适合此列的宽度，如“直到结束的其余宽度”。所以要灵活。

我的HTML：

  <div class="container-fluid">
    <div class="jumbotron">
      <div class="row">        
        <div class="col-xl-3 .mx-auto text-center">
          <div class="row">              
              <div class="col-xl-1  bg-dark">
                 <img src="img/01_number_in_circular.svg" alt="Step 1">
              </div>
              <div class="col-xl-11 bg-success">
                  <h2>Title of Content</h2>
                  <p>Description Text in short form.</p>
              </div>              
          </div>
          </div>
          <div class="col-xl-9 bg-info">
            Column 3            
          </div>
      </div>
    </div>

我也尝试过col-xl-*，但它不起作用。

有没有我可以申请的课程？我希望你可以帮助我。先感谢您。

Answer 1

下面有工作示例（在“全窗口”模式下运行shippet）。基于https://getbootstrap.com/docs/4.0/layout/grid/

结果：

.col1 {
    background-color: red;
}

.col2 {
    background-color: green;
}

.col3 {
    background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="col col-md-auto col1">
      1 of 3
    </div>
    <div class="col-md-auto col2">
      Variable width content
    </div>
    <div class="col col3">
      3 of 3
    </div>
  </div>
    <div class="row">
    <div class="col col-md-auto col1">
      1 of 3
    </div>
    <div class="col-md-auto col2">
      Variable width content
    </div>
    <div class="col col3">
      3 of 3
    </div>
  </div>
    <div class="row">
    <div class="col col-md-auto col1">
      1 of 3
    </div>
    <div class="col-md-auto col2">
      Variable width content ......
    </div>
    <div class="col col3">
      3 of 3
    </div>
  </div>
    <div class="row">
    <div class="col col-md-auto col1">
      1 of 3
    </div>
    <div class="col-md-auto col2">
      Variable width content .....................
    </div>
    <div class="col col3">
      3 of 3
    </div>
  </div>
</div>