仅使用引导类对齐图标和 div

Question

我有这个代码

<div class="row">
        <h3><b>We've got you covered</b></h3>
        <h6>Find things to do in cities around the world</h6>
        <div class="col-md-4">
        <div class="div-icon col">
        <i class="fas fa-info h1"></i>
        </div>
        <div class="div-content col">
        <b>Explore top attractions</b>
        <p><small>Experience the best of your destination with attractions, tours, activities, and more</small></p>
        </div>
        </div>
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
        </div>

我希望图标和文本像这样对齐

图标和文字代码

<div class="col-md-4">
        <div class="div-icon col">
        <i class="fas fa-info h1"></i>
        </div>
        <div class="div-content col">
        <b>Explore top attractions</b>
        <p><small>Experience the best of your destination with attractions, tours, activities, and more</small></p>
        </div>
        </div>

使用col 和col 不会将col-md-4 一分为二。有没有办法只使用引导类并排显示图标和内容？

Answer 1

你必须用 div class="row" 包裹你的内部 cols 并给 cols 特定的大小

<div class="col-md-4">
        <div class="row">
          <div class="div-icon col-md-1">
        <i class="fas fa-info h1"></i>
        </div>
        <div class="div-content col-md-11">
        <b>Explore top attractions</b>
        <p><small>Experience the best of your destination with attractions, tours, activities, and more</small></p>
        </div>
        </div>
        </div>