i'm使用

Question

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">


<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 text-center g-3">
    <div class="col-12">
      <h1>Services</h1>
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
    </div>
    <div class="col bg-white border rounded p-3">
      <img class="rounded-circle" src="#" alt="#">
      <h4>Title Here</h4>
      <p>Some more info here</p>
    </div>
    <div class="col bg-white border rounded p-3">
      <img src="#" alt="#">
      <h4>Title Here</h4>
      <p>Some more info here</p>
    </div>
    <div class="col bg-white border rounded p-3">
      <img src="#" alt="#">
      <h4>Title Here</h4>
      <p>Some more info here</p>
    </div>
    <div class="col bg-white border rounded p-3">
      <img src="#" alt="#">
      <h4>Title Here</h4>
      <p>Some more info here</p>
    </div>
    <div class="col bg-white border rounded p-3">
      <img src="#" alt="#">
      <h4>Title Here</h4>
      <p>Some more info here</p>
    </div>
    <div class="col bg-white border rounded p-3">
      <img src="#" alt="alt text">
      <h4>Title Here</h4>
      <p>Some more info here</p>
    </div>
  </div>
</div>

因此，这个问题是我必须在我的

col

div内部创建另一个div，该div应该具有

bg-white border rounded p-3

的类别，并且不应在

col

Div。

检查下面的代码。

我取代了这个

Answer 1

this

<div class="col">
    <div class="bg-white border p-3">
         <img src="#" alt="alt text">
         <h4>Title Here</h4>
          <p>Some more info here</p>
    </div>
</div>

您的第一列正在使用整个行 - 所有12列。  如果将第一列更改为

<div class=“col”>

，它会提供您想要的吗？