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>

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

1 个答案: