Question

我有3张卡，但是当我将所有三张卡连续放置时，它会出现两张卡，而另一张卡在其下...我想将所有三张卡都排成一列，而且我希望它具有响应性与其他设备。我希望它像本网站中的卡片一样显示（我的意思不是相同的形状，我的意思是连续且响应迅速）： https://linksfire.co/ 这是我的代码：

<div class="container">
    <div class="row">
         <div class="col-sm-4 card">1</div>
         <div class="col-sm-4 card">2</div>
         <div class="col-sm-4 card">3</div>
    </div>
</div>

Answer 1

如果您需要具有3列而不考虑视口宽度，请使用col-4。

.card默认具有1px边框。您有3张卡，它们的border-x的总大小为6px。这可能是布局中断的原因。因此，您应该在单独的元素上使用.card。

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <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">

  <body>
    <div class="container">
      <div class="row">
        <div class="col-4">
          <div class="card">1</div>
        </div>
        <div class="col-4">
          <div class="card">1</div>
        </div>
        <div class="col-4">
          <div class="card">1</div>
        </div>
      </div>
    </div>
  </body>

</html>

Answer 2

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <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">
<body>
<div class="container">
    <div class="row">
        <div class="col card">1</div>
        <div class="col card">2</div>
        <div class="col card">3</div>
    </div>
    <div class="row">
        <div class="col card">4</div>
        <div class="col card">5</div>
        <div class="col card">6</div>
    </div>
</div>
</body>
</html>

<div class="container">
    <div class="row">
        <div class="col card">1</div>
        <div class="col card">2</div>
        <div class="col card">3</div>
    </div>
    <div class="row">
        <div class="col card">4</div>
        <div class="col card">5</div>
        <div class="col card">6</div>
    </div>
</div>

如何使用引导程序在其中放入3张卡片的响应式行？

2 个答案: