容器中的引导网格不是100％的宽度 - 而是DIV设置为100％宽度正确显示

发布于 2025-01-31 13:12:57 字数 833 浏览 5 评论 0原文

我在一个容器中有一个自举网格。该网格没有以100％的宽度显示。但是，普通的DIV设置为同一容器中的宽度为100％，确实显示出宽度。

由于某种原因，该网格似乎具有正确的边距。

有人吗？

这是正在发生的事情的屏幕截图。下面的代码。

<div class="container">

  <div style="width:100%; background-color:pink;">100% width</div>

  <div class="row">
    <div class="col-6" style="background-color:red;">
      1
    </div>
    <div class="col-6" style="background-color:blue;">
      <div class="row">
        <div class="col-12" style="background-color: lime;">2</div>
        <div class="col-6" style="background-color: orange;">3</div>
        <div class="col-6" style="background-color: grey;">4</div>
      </div>
    </div>
  </div>

</div>

原文

I have a bootstrap grid within a container. This grid is not showing at 100% width. But a plain div set to 100% width in the same container, does show full width.

The grid seems to have a right margin for some reason.

Any takers?

Here's a screenshot of what is going on. Code below.

<div class="container">

  <div style="width:100%; background-color:pink;">100% width</div>

  <div class="row">
    <div class="col-6" style="background-color:red;">
      1
    </div>
    <div class="col-6" style="background-color:blue;">
      <div class="row">
        <div class="col-12" style="background-color: lime;">2</div>
        <div class="col-6" style="background-color: orange;">3</div>
        <div class="col-6" style="background-color: grey;">4</div>
      </div>
    </div>
  </div>

</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

埋情葬爱 2025-02-07 13:12:57

<div class="container">
   <div class="row">
      <div  style="width:100%; background-color:pink;">100% width</div>
   </div>
   <div class="row">
      <div class="col-6" style="background-color:red;">
         1
      </div>
      <div class="col-6" style="background-color:blue;">
         <div class="row">
            <div class="col-12" style="background-color: lime;">2</div>
            <div class="col-6" style="background-color: orange;">3</div>
            <div class="col-6" style="background-color: grey;">4</div>
         </div>
      </div>
   </div>
</div>

<div class="container">
   <div class="row">
      <div  style="width:100%; background-color:pink;">100% width</div>
   </div>
   <div class="row">
      <div class="col-6" style="background-color:red;">
         1
      </div>
      <div class="col-6" style="background-color:blue;">
         <div class="row">
            <div class="col-12" style="background-color: lime;">2</div>
            <div class="col-6" style="background-color: orange;">3</div>
            <div class="col-6" style="background-color: grey;">4</div>
         </div>
      </div>
   </div>
</div>

回复收藏 0 原文

您的好友蓝忘机已上羡 2025-02-07 13:12:57

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div style="width:100%; background-color:pink;">100% width</div>
  </div>
  <div class="row">
    <div class="col-6" style="background-color:red;">
      1
    </div>
    <div class="col-6" style="background-color:blue;">
      <div class="row">
        <div class="col-12" style="background-color: lime;">2</div>
        <div class="col-6" style="background-color: orange;">3</div>
        <div class="col-6" style="background-color: grey;">4</div>
      </div>
    </div>
  </div>

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div style="width:100%; background-color:pink;">100% width</div>
  </div>
  <div class="row">
    <div class="col-6" style="background-color:red;">
      1
    </div>
    <div class="col-6" style="background-color:blue;">
      <div class="row">
        <div class="col-12" style="background-color: lime;">2</div>
        <div class="col-6" style="background-color: orange;">3</div>
        <div class="col-6" style="background-color: grey;">4</div>
      </div>
    </div>
  </div>

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

回复收藏 0 原文

~没有更多了~