在一列中展开带有标题的 Bootstrap 图像

Question

我有一个 Bootstrap 5 网站的价格比较部分，一栏完美地显示图像（没有标题），但是每当我为标题添加段落标签时，图像就会堆叠在另一个之上，而不是保持在一行中。

这是没有标题的图像代码：

          <div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="150">
        <div class="box">
          <h3>Basic</h3>
          <h4><sup>£</sup>4.50<span> / month</span></h4>
          <ul>
            <li><i class="bi bi-check-circle"></i>Web and mobile versions of Office apps only</li>
            <li><i class="bi bi-check-circle"></i>Chat, call, meet up to 300 attendees</li>
            <li><i class="bi bi-check-circle"></i>1 TB of cloud storage per user</li>
            <li><i class="bi bi-check-circle"></i>Business-class email</li>
            <li><i class="bi bi-check-circle"></i>Standard security</li>
            <li><i class="bi bi-check-circle"></i>Anytime phone and web support</li>
          </ul>

          <p>Web and mobile apps and services:</p>
        
          <img src="assets/img/Word_64x64.png" alt="" class="img-fluid">
          <img src="assets/img/Excel_64x64.png" alt="" class="img-fluid">
          <img src="assets/img/Outlook_64x64.png" alt="" class="img-fluid">
          <img src="assets/img/PowerPoint_64x64.png" alt="" class="img-fluid">
          <img src="assets/img/Microsoft_Teams_64x64.png" alt="" class="img-fluid">
          <img src="assets/img/Outlook_64x64.png" alt="" class="img-fluid">
          <img src="assets/img/Exchange_64x64.png" alt="" class="img-fluid">
          <img src="assets/img/OneDrive_64x64.png" alt="" class="img-fluid">
          <img src="assets/img/SharePoint_64x64.png" alt="" class="img-fluid">
          
          <div class="btn-wrap">
            <a href="#" class="btn-buy">Buy Now</a>
          </div>

        </div>
      </div>

这是带有标题的图像的代码：

          <div class="col-lg-4 col-md-6 mt-4 mt-lg-0" data-aos="zoom-in" data-aos-delay="150">
        <div class="box featured">
          <h3>Premium</h3>
          <h4><sup>£</sup>16.60<span> / month</span></h4>
          <b><p>Everything in Business Standard, plus:</p></b>
          <ul>
            <li><i class="bi bi-check-circle white"></i>Advanced security
            <li><i class="bi bi-check-circle white"></i>Access and data control
            <li><i class="bi bi-check-circle white"></i>Cyberthreat protection</li>
            <li><i class="bi bi-check-circle white"></i>Mobile device management</li>
          </ul>

          <p>Desktop, web, and mobile apps and services:</p>

          <img src="assets/img/Excel_64x64.png" alt="" class="img-fluid"><p>Excel</p>
          <img src="assets/img/Outlook_64x64.png" alt="" class="img-fluid"><p>Outlook</p>
          <img src="assets/img/PowerPoint_64x64.png" alt="" class="img-fluid"><p>PowerPoint</p>
          <img src="assets/img/Microsoft_Teams_64x64.png" alt="" class="img-fluid"><p>Teams</p>
          <img src="assets/img/Outlook_64x64.png" alt="" class="img-fluid"><p>Outlook</p>
          <img src="assets/img/Exchange_64x64.png" alt="" class="img-fluid"><p>Exchange</p>
          <img src="assets/img/OneDrive_64x64.png" alt="" class="img-fluid"><p>OneDrive</p>
          <img src="assets/img/SharePoint_64x64.png" alt="" class="img-fluid"><p>SharePoint</p>
          <img src="assets/img/Access_64x64.png" alt="" class="img-fluid"><p>Access</p>
          <img src="assets/img/Publisher_64x64.png" alt="" class="img-fluid"><p>Publisher</p>

          <div class="btn-wrap">
            <a href="#" class="btn-buy">Buy Now</a>
          </div>
        </div>
      </div>

我需要更改什么才能使图标保持内联？

Answer 1

尝试将<img>和<p>包装在<div>中。 由于<p>是块级元素，这意味着<p>之后的任何元素都将自动添加到新行中。 这是我的例子

<div>
    <img/>
    <span>your text here</span>
</div>

另请注意，我正在将<p>更改为<span>

Answer 2

尝试使用 bootstrap 的 flex 属性

<div class="d-flex flex-column align-items-center justify-content-center">
    <img/>
    <p>your text here</p>
</div>

有关更多详细信息，请查看引导文档 [https://getbootstrap.com/docs/5.0/utilities/flex/]

你可以用 flex-wrap 包裹所有的图像 div

<div class="d-flex flex-wrap">
  ...
</div>