为什么Bootstrap-5行和普通div块的宽度不同？

n53p2ov0 于 2022-12-08 发布在 Bootstrap

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

我有一个非常简单的代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="pt-5  bg-info">
  <!-- Something -->
</div>

<div class="row pt-4 bg-success">
  <!-- Something -->
</div>

但是，作为一个结果（这个特定的代码），我有2个不同宽度的这些块。那么为什么会发生这种情况，如何防止这种情况？

twitter-bootstrap

来源：https://stackoverflow.com/questions/73293003/why-bootstrap-5-row-and-usual-div-blocks-have-a-different-width

1条答案

按热度按时间

6qfn3psc1#

The problem is caused by Bootstrap library's internal row class -bs-gutter-x: 1.5rem; to set the property. If you manually overwrite this property, this behavior will be resolved as you wish. Changing the library's behavior in this way causes different side effects. This is not recommended behavior. That's why I suggest you follow the steps in section "Suggestion".

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <style>
      .row {
        --bs-gutter-x: 0rem !important;
      }
    </style>
  </head>
  <body>
    <div class="pt-5  bg-info"></div>
    <div class="row pt-4 bg-success"></div>
  </body>
</html>

Suggestion

The pt class is used to change the padding-top property. The different use of the pt class is not relevant to the problem. To responsively place elements horizontally, define child <div> elements with row class within a <div> element with container class.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  
<div class="container">
  <div class="row">
    <div class="pt-5 bg-info"></div>
  </div>
  
  <div class="row">
    <div class="pt-4 bg-success">
  </div>
</div>

References

赞(0）回复(0）举报 2022-12-08

我来回答

为什么Bootstrap-5行和普通div块的宽度不同？

1条答案

Suggestion

References

相关问题

热门标签

最新问答