为什么应用于我的列的边框样式被部分遮盖了？

Question

我在页面的左右两栏（图书图片所在的位置）周围设置了边框。但是在图像的左侧和右侧，它们被遮盖了，好像 Hyperlinks/images 具有非常宽的边距或填充，但它们没有。

这就是我要说的（有几个边框的模糊部分被圈起来）：

您可以看到在图像之间的边框两侧（图像上方和下方）显示了一段边框。就好像图像的不可见部分正在向左和向右扩展它们的宽度。

这是这些超链接中涉及的html（和内联CSS）

<div runat="server" class="col" style="border-style: solid;">
    <div class="row">
        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="https://www.amazon.com/Movie-        Quotes-All-Occasions-Unforgettable-ebook/dp/B06Y3TB8VC/garrphotgall-20">
    <asp:image runat="server" ImageUrl="images/MovieQuotesForAllOccasions.jpg"  style="width:144px;height:144px;margin-left: 60px;" /><br />
    <asp:Label runat="server" Target="_blank"></asp:Label>
        </asp:HyperLink>
    </div>
    . . .

我将 margin-left 从 60 更改为 6，看看是否至少可以“释放”右边框，但事实并非如此。

什么干扰了我的边框的自由流动，我怎样才能让它显示在列周围的连续线条中？

更新

这是一个更好的屏幕截图，显示了边框“跳过”的位置（有点疯狂的“虚线”外观）：

我什至尝试根据以下答案添加此内容：

<div id="leftCol" runat="server" class="col" style="margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important;">

...但仍然没有变化 - 它看起来与上面的更新屏幕截图相同。

更新 2

我的 Site.CSS 没有被阅读，所以我在 header 部分内嵌了一个样式标签，并添加了那些：

<style>
mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
</style>

...并将 class 像这样添加到外部两列（左侧和右侧）- 将其添加到中间导致所有达拉斯都变得松散，从视觉上看：

<div id="leftCol" runat="server" class="col mx-0 px-0">

...导致事情变得“古怪”(appearance-wise)，也没有解决边界问题。

这是左栏的图像代码：

<div class="row">
    <asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="https://www.amazon.com/SAMSUNG-65-inch-  Curved-TU-8300-Built/dp/B08BTJ5JZ8/garrphotgall-20">
    <asp:image runat="server" ImageUrl="Images\Samsung65.jpg" style="width:144px;height:144px;border:   2px solid blue;" /><br />
    </asp:HyperLink>
</div>

使用那些 classes（并删除我在图像中的 60px 的 margin-left 设置）给我这个：

如您所见，左栏中的图像正试图逃往西方。

右栏图片的边距设置我没有去掉，是这样的：

<asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="https://www.amazon.com/Samsung-  QN82Q60RAFXZA-Flat-QLED-Smart/dp/B07N4L5VYG/garrphotgall-20">
    <asp:image runat="server" ImageUrl="Images\SamsungQN65.jpg" Target="_blank"     style="width:144px;height:144px;margin-left: 60px;border: 2px solid blue;" /><br />
</asp:HyperLink>

更新 3

终于明白MaxiGui说的是什么意思了，在每一行图片上加了这个：

<div class="row mx-0 px-0">
    <asp:HyperLink ID="HyperLink4" runat="server" 
            NavigateUrl="https://www.amazon.com/SAMSUNG-65-inch-Curved-TU-8300- 
            Built/dp/B08BTJ5JZ8/garrphotgall-20">
        <asp:image runat="server" ImageUrl="Images\Samsung65.jpg"        
            style="width:144px;height:144px;border: 2px solid blue;" /><br />
    </asp:HyperLink>
</div>

...现在改进很多：边框看起来不错：

...但我真的不希望图像像那样拥抱左侧，所以会调整左边距值...我在 CSS [=102] 中将左边距更改为 60 =]:

mx-0 {
    margin-left: 60px !important;
    margin-right: 0 !important;
}

...并没有什么区别。什么？！？然而，如果我像这样将 60 的左边距直接添加到 last/bottom 图像中：

<div class="row mx-0 px-0">
    <asp:HyperLink ID="HyperLink2" runat="server" 
            NavigateUrl="https://www.amazon.com/Film-Buffs-Bucket-List- 
            Movies-ebook/dp/B01BW5E4YY/garrphotgall-20">
        <asp:image runat="server" ImageUrl="Images\FilmBuffsBucketList.jpg" 
            Target="_blank" style="width:144px;height:144px;margin-left: 
            60px;border: 2px solid blue;" /><br />
    </asp:HyperLink>
</div>

...它确实有效（下图）：

更新 4

太棒了，它现在工作得很好（见下文），但只有当我将 MaxGui 的 classes 合并到行中并向图像添加 60 的内联 left-margin 时，如：

<div class="row mx-0 px-0">
    <asp:HyperLink ID="HyperLink2" runat="server" 
            NavigateUrl="https://www.amazon.com/Film-Buffs-Bucket-List- 
            Movies-ebook/dp/B01BW5E4YY/garrphotgall-20">
        <asp:image runat="server" ImageUrl="Images\FilmBuffsBucketList.jpg" 
            Target="_blank" style="width:144px;height:144px;margin-left: 
            60px;border: 2px solid blue;" /><br />
    </asp:HyperLink>
</div>

不过，让我担心的是，我为图像添加 60px 后，在较小的设备（平板电脑和手机）上查看时图像会松动。图像将溢出其边界并入侵邻国，可能...

Answer 1

这是因为 bootstrap 默认情况下在其所有列上应用填充。正如您在下面的代码中看到的：

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

此填充用于补偿行中由 bootstrap 设置的边距，如下面的代码所示：

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

如果您不希望发生这种情况，我建议您在有排行时始终应用 mx-0，在有 col

时始终应用 px-0

这个class会像：

mx-0{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
px-0{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

所以只需应用 row mx-0 和 col-6 px-0 然后你可能需要调整 col-6 中的一些 div 以获得一点 space.

Answer 2

添加 .no-guttersclass 和 .row ..

如果需要填充 .col class 使用 spacing utilities。例如 .px-md-5 或 px-5

没有排水沟

from bootstrap doc

预定义网格 class 中列之间的间距可以用 .no-gutters 删除。这会删除 .row 的负边距和所有直接子列的水平填充。

这是创建这些样式的源代码。请注意，列覆盖仅限于第一个子列，并通过属性选择器进行定位。虽然这会生成一个更具体的选择器，但仍可以使用 spacing utilities.

进一步自定义列填充

需要 edge-to-edge 设计？ 删除父项 .container 或 .container-fluid。

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

为什么应用于我的列的边框样式被部分遮盖了？

Why is the border style applied to my column being partially obscured?

html

css

border

twitter-bootstrap

更新

更新 2

更新 3

更新 4