css Bootstrap的网格行宽度溢出

aydmsdu9 于 2023-06-25 发布在 Bootstrap

关注(0)|答案(1)|浏览(167)

我甚至没有使用CSS，只包括Bootstrap 5。
HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap</title>
    <article>
      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous"
      />

      <link rel="stylesheet" href="bs-justify.css" />

      <script
        src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"
      ></script>
      <script
        src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"
      ></script>
      <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"
      ></script>
    </article>
  </head>
  <body>

        <br>
      <h4 class="display4 text-center"><i>The Grid System</i></h2>
        <div class="row">
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col bg-dark text-light border text-center">This is an automatic unit</div>
            <div class="col bg-dark text-light border text-right">This is an automatic unit</div>
            <div class="col bg-dark text-light border text-left">This is an automatic unit</div>
            <div class="col bg-dark text-light border">This is an automatic unit</div>
        </div>
        <br>
  </body>
</html>

请帮帮我，伙计们。我是一个初学者。
我试了几种方法，都奏效了，但这不是我的想法。这个想法是为什么Bootstrap的默认设置默认创建溢出宽度？

css

来源：https://stackoverflow.com/questions/76541247/bootstraps-grid-rows-width-is-overflowing

1条答案

按热度按时间

8qgya5xd1#

将.row元素 Package 在.container或.container-fluid元素中以实现bootstrap的网格。有关更多信息，请参阅Bootstrap's Grid system docs page：* “Bootstrap的网格系统使用一系列容器、行和列来布局和对齐内容。"*

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap</title>
    <article>
      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous"
      />

      <link rel="stylesheet" href="bs-justify.css" />

      <script
        src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
        crossorigin="anonymous"
      ></script>
      <script
        src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"
      ></script>
      <script
        src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"
      ></script>
    </article>
  </head>
  <body>

        <br>
      <h4 class="display4 text-center"><i>The Grid System</i></h2>
      <div class="container">
        <div class="row">
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col bg-dark text-light border text-center">This is an automatic unit</div>
            <div class="col bg-dark text-light border text-right">This is an automatic unit</div>
            <div class="col bg-dark text-light border text-left">This is an automatic unit</div>
            <div class="col bg-dark text-light border">This is an automatic unit</div>
        </div>
      </div>
      <p class="py-3 text-center">OR full-width container:</p>
      <div class="container-fluid">
        <div class="row">
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col-4 bg-dark text-light border">This is a 4 unit column</div>
            <div class="col bg-dark text-light border text-center">This is an automatic unit</div>
            <div class="col bg-dark text-light border text-right">This is an automatic unit</div>
            <div class="col bg-dark text-light border text-left">This is an automatic unit</div>
            <div class="col bg-dark text-light border">This is an automatic unit</div>
        </div>
      </div>
      <br>
  </body>
</html>

赞(0）回复(0）举报 2023-06-25

我来回答

css Bootstrap的网格行宽度溢出

1条答案

相关问题

热门标签

最新问答