Bootstrap 如何在引导卡之间添加余量而不触发柔性 Package ？

yqyhoc1h  于 2022-12-31  发布在  Bootstrap
关注(0)|答案(2)|浏览(111)

我正在使用Bootstrap卡，我想用2px的边距将它们分开。
尽管如此，当我应用它时（使用Bootstrap的margin类或直接在样式表上），flex-wrap触发器和卡片向下移动一行。
我该如何处理这种行为？
我应该给卡片一个最大宽度吗？

.dark-theme body,
.dark-theme .card {
  background-color: #121212;
  color: #ffffffa6;
}

.dark-theme section.card {
  background-color: #464646;
}

.card {
  border-width: 0;
  margin: 3px;
}

main {
  padding: 100px;
}

h1 {
  text-align: center;
}

h2,
.card {
  margin-top: 20px;
}

.dark-theme .btn {
  background-color: salmon;
  border-color: salmon;
}
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<div class="highlights row">
  <section class="card col-md-6 col-lg-4">
    <h3>Where does it come from?</h3>
    <p>
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    </p>
    <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    <a href="#" class="card__btn btn btn-info">when an unknown</a>
  </section>

  <section class="card col-md-6 col-lg-4">
    <h3>Where does it come from?</h3>
    <p>
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    </p>
    <p>
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    </p>
    <a href="#" class="card__btn btn btn-info">
                  when an unknown
                </a>
  </section>

  <section class="card col-md-6 col-lg-4">
    <h3>Where does it come from?</h3>
    <p>
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </p>
    <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    <a href="#" class="card__btn btn btn-info">
                  when an unknown
                </a>
  </section>
twitter-bootstrap

2条答案

按热度按时间
r8xiu3jd

r8xiu3jd1#

首先也是最重要的，删除Bootstrap类上设置的所有边距。Bootstrap的目的是不需要添加间距/大小，因为它内置在类中。
我对你的结构做了很多修改。主要是尝试按照Bootstrap的建议来构造元素。尽管如此，不要将每张卡片嵌套在节中。相反，将它们嵌套在divs.The <section> tag defines a section in a document.中&如果我没有弄错的话，排成一行的三张卡片可以算作一个节。我将所有三张卡片嵌套在一个节中，并将其称为你已经拥有的highlights类。
col的功能是为某些内容预留空间的方法。因此，在三卡设置中，您应该使用col-4。最大的列是col-12，它跨越屏幕的整个宽度。12/4 = 3。然后，您可以使用smlg和md来获得媒体屏幕上的响应。上面的示例创建了三个相等的-使用预定义的网格类在小型、中型、大型和超大型设备上创建宽度列。这些列在具有row父级的页面上居中。
话虽如此，您的代码没有按预期工作的主要原因是额外的CSS边距，以及cards应该嵌套在col中。最后，如前所述，列大小的误用。
我建议你复习一下Bootstrap Grid System，如果你知道Bootstrap，你可以用很少的CSS知识建立一个完全响应的网站。

.dark-theme body,
.dark-theme .card {
  background-color: #121212;
  color: #ffffffa6;
}

.dark-theme section.card {
  background-color: #464646;
}

.card {
  border-width: 0;
}

main {
  padding: 100px;
}

h1 {
  text-align: center;
}

.dark-theme .btn {
  background-color: salmon;
  border-color: salmon;
}
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="highlights">
  <div class="row w-100 m-0 justify-content-center">

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card w-100">
        <h3>Where does it come from?</h3>
        <p>
          orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
        </p>
        <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        <a href="#" class="card__btn btn btn-info">when an unknown</a>
      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card w-100">
        <h3>Where does it come from?</h3>
        <p>
          orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
        </p>
        <p>
          orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
        </p>
        <a href="#" class="card__btn btn btn-info">
      when an unknown
      </a>
      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card w-100">
        <h3>Where does it come from?</h3>
        <p>
          orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
        </p>
        <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        <a href="#" class="card__btn btn btn-info">
    when an unknown
    </a>
      </div>
    </div>
  </div>
</section>
赞(0）分享  回复(0）举报  2022-12-31
omvjsjqw

omvjsjqw2#

在这里，您可以使用Gutters类中的Bootstrap网格系统.

**间距是列内容之间的间隙，由水平填充创建。**我们在每列上设置右填充和左填充，并使用负边距在每行的开始和结束位置偏移，以对齐内容。

您可以根据自己的需要将g-1、g-2、g-3、g-4和g-5排成一行使用。

.dark-theme body, .dark-theme .card {background-color: #121212; color: #ffffffa6;}
.dark-theme section.card {background-color: #464646;}
.card {border-width: 0;}
main {padding: 100px;}
h1 {text-align: center;}
.dark-theme .btn {background-color: salmon;border-color: salmon;}
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<section class="highlights">
  <div class="row justify-content-center g-1">

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card">
        <h3>Where does it come from?</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        <a href="#" class="card__btn btn btn-info">when an unknown</a>
      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card">
        <h3>Where does it come from?</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p><a href="#" class="card__btn btn btn-info">when an unknown</a>
      </div>
    </div>

    <div class="col-lg-4 col-md-4 col-sm-4">
      <div class="card">
        <h3>Where does it come from?</h3>
        <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p><p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#" class="card__btn btn btn-info">when an unknown</a>
      </div>
    </div>
  </div>
</section>
赞(0）分享  回复(0）举报  2022-12-31
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com