行未完全填满容器宽度

Question

我正在尝试使用 bootstrap 创建一个容器。我在容器的顶部添加了一个名称和一个按钮作为一行，添加了背景颜色，并为容器添加了一个边框。但是，边框比行稍宽，因此在右侧，边框与行断开连接，如果您愿意，它不会完成“window”。添加了图片和我的代码。

 <div
          class="container"
          style="border-radius: 5px; border: 2px solid #98bcdb;border-top-style: hidden; "
        >
          <div
            class="row"
            style="
              background-color: #337ab7;
              border: 3px solid #337ab7;
              border-radius: 5px 5px 0px 0px;
              color: white;
              height: 40px;
              padding: 5px;
            "
          >
            <div class="col-6">
              Dokumenty
            </div>
    
            <div
              class="col-6"
              style="
                display: flex;
                justify-content: flex-end;
                align-items: baseline;
              "
            >
              <i class="fa-solid fa-plus"></i>
              Připojit soubor
            </div>
          </div>
          <br />
    </div>

起初边框在顶部也断开连接，但我删除了边框的顶部。看起来稍微好一点，但是右边还是断线了

Answer 1

我刚刚花了 10 分钟试图找出为什么 container 边框设置为 2px，但显示为 1.9px，这在它和 child 之间产生了 1px 的差距。结果我将浏览器的缩放设置为 90%。也许这也是您的问题？否则它看起来不错：

.container
{
  border-radius: 5px;
  border: 2px solid #98bcdb;
  overflow: hidden; /* added to hide square corners of the child */
}

.row
{
  background-color: #337ab7;
  border: 0px solid #337ab7;
/*  border-radius: 5px 5px 0px 0px;*/
  color: white;
  height: 40px;
  padding: 5px;
}

.col-6.right
{
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
}

<div
      class="container"
    >
      <div
        class="row"
      >
        <div class="col-6">
          Dokumenty
        </div>

        <div
          class="col-6 right"
        >
          <i class="fa-solid fa-plus"></i>
          Připojit soubor
        </div>
      </div>
      <br />
</div>

另请注意，我删除了 child 的边框舍入，因为它产生的半径与 parent 不同，我在 container

中隐藏了溢出

行未完全填满容器宽度

Row doesn't completely fill container width

html

css

containers

bootstrap-4