时间戳

首页 > 解决方案 > Bootstrap 中的列问题

bootstrap-4 - Bootstrap 中的列问题

问题描述

两个问题合二为一：

  1. 我需要将整个 HTML“正文”分成两列，理想情况下，“某天……”之前的所有内容都应该在一列中，而“某天……”的文本应该在第二列中。
  2. 图像应该是三个一排，我将它们包裹在一个“行”中，但它们仍然被包裹。我附上代码：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">

<div class="container">
  <div class="row">

    <!-- Left Half -->
    <div class="col col-sm col-md">

      <!-- Logo -->
      <div class="row">
        <div class="col-4">
          <div class="logo">
            <div class="paw_logo">
              <div class="el1"></div>
              <div class="el2"></div>
              <div class="el3"></div>
              <div class="el4"></div>
              <div class="rect1"></div>
              <div class="rect2"></div>
            </div>
            <div class="logo_text">PetsPaw</div>
          </div>
          <div class="col-auto"></div>
        </div>
      </div>

      <!-- Hello Square -->
      <div class="row">
        <div class="col">
          <h1>Hi Stranger!</h1>
          <p>Welcome to my test project!</p>
          <h3>Lets start using The Dogs API</h3>
        </div>
      </div>

      <!-- Selection zone -->
      <div class="row">
        <div class="col-sm-auto">
          <div class="votingpic">
            <img src="https://via.placeholder.com/300" class="votingimg">
          </div>
        </div>
        <div class="col-sm-auto">
          <div class="dogpic">
            <img src="https://via.placeholder.com/300" class="dogimg">
          </div>
        </div>
        <div class="col-col-sm-auto">
          <div class="gallerypic">
            <img src="https://via.placeholder.com/300" class="galleryimg">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col col-md col-sm">

        </div>
        <div class="col-12 col-md-6 col-sm-3">

        </div>
        <div class="col-12 col-md-6 col-sm-3">

        </div>
      </div>

    </div>

    <!-- Right Half -->
    <div class="col col-sm col-md">
      <div class="row">
        <div class="col">
          <h1>Some day there will be something</h1>
        </div>
      </div>
    </div>

标签： bootstrap-4

解决方案

你的两列看起来不错。内部图像列的问题在于它们的行为就像在移动显示器上一样，因为它们周围的列很窄。在这种情况下，它们是全宽的。用 覆盖它col-4。您可能还需要图像上的响应式图像类。

.row>* {
  background: rgba(255, 0, 0, .1);
}

.row>*:first-child {
  background: rgba(0, 0, 255, .1);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" integrity="undefined" crossorigin="anonymous">

<div class="container">
  <div class="row">

    <!-- Left Half -->
    <div class="col col-sm col-md">

      <!-- Logo -->
      <div class="row">
        <div class="col-4">
          <div class="logo">
            <div class="paw_logo">
              <div class="el1"></div>
              <div class="el2"></div>
              <div class="el3"></div>
              <div class="el4"></div>
              <div class="rect1"></div>
              <div class="rect2"></div>
            </div>
            <div class="logo_text">PetsPaw</div>
          </div>
          <div class="col-auto"></div>
        </div>
      </div>

      <!-- Hello Square -->
      <div class="row">
        <div class="col">
          <h1>Hi Stranger!</h1>
          <p>Welcome to my test project!</p>
          <h3>Lets start using The Dogs API</h3>
        </div>
      </div>

      <!-- Selection zone -->
      <div class="row">
        <div class="col-4">
          <div class="votingpic">
            <img src="https://via.placeholder.com/300" class="img-fluid votingimg">
          </div>
        </div>
        <div class="col-4">
          <div class="dogpic">
            <img src="https://via.placeholder.com/300" class="img-fluid dogimg">
          </div>
        </div>
        <div class="col-4">
          <div class="gallerypic">
            <img src="https://via.placeholder.com/300" class="img-fluid galleryimg">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col col-md col-sm">

        </div>
        <div class="col-12 col-md-6 col-sm-3">

        </div>
        <div class="col-12 col-md-6 col-sm-3">

        </div>
      </div>

    </div>

    <!-- Right Half -->
    <div class="col col-sm col-md">
      <div class="row">
        <div class="col">
          <h1>Some day there will be something</h1>
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读