如何在Bootstrap 4中修复列

Question

因此，此代码块无法正常工作。它的意思是并排显示这两列，但不起作用。请帮忙。

我正在看一个教程，这本来可以。我也对文档进行了交叉检查，但仍然无法正常工作。

<section id="feature-one">
  <div class="container-fluid">
    <div class="row">
      <div class="feature-content">
        <div class="col-sm-5">
          <a href="#"><img src="../Mywebsite/images/Umass logo.png" alt="Umass Logo" width="100%" height="200px"></a>
        </div>
        <div class="col-sm-6 offset-sm-1">
          <h3> Click on the Logo to view my UMass Experience </h3>
        </div>
      </div>
    </div>
  </div>
</section>

这些列应该并排显示，但要显示为一列。

Answer 1

不要用.col包装<div class="feature-content">标签。它会破坏Bootstrap CSS。

如果您需要feature-content类的某些功能，请将其添加到row标记中。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<section id="feature-one">
  <div class="container-fluid">
    <div class="row feature-content">
      <div class="col-sm-5">
        <a href="#"><img src="../Mywebsite/images/Umass logo.png" alt="Umass Logo" width="100%" height="200px"></a>
      </div>
      <div class="col-sm-6 offset-sm-1">
        <h3> Click on the Logo to view my UMass Experience </h3>
      </div>
    </div>
  </div>
</section>