为什么我的专栏的边框样式被部分模糊了？

Question

我在页面的左右列(书图像所在的地方)周围有边框。但是在图像的左边和右边，它们被模糊了，就好像超链接/图像有很宽的边距或填充，但它们没有。

下面是我要说的(边界的几个模糊部分被圈起来了)：

​

​

您可以看到，有一个边框显示在图像之间的边界(上面和下面)。就好像图像的一个看不见的部分正在向左和右扩展。

这是这些超链接所涉及的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>
    . . .

我把左边的边界线从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;">

...but仍然没有改变-它看起来和上面的更新屏幕截图一样。

更新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>

...and将类似这样的类添加到外部的两列(左列和右列)--从视觉上讲，将它添加到中间使所有达拉斯都松开了：

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

...which使事情变得“古怪”(从外观上看)，也没有解决边界问题。

以下是左列的图像代码：

<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>

使用这些类(并删除我在图像中的60 me的边距-左设置)将提供以下内容：

​

​

正如你所看到的，左边列中的图像正试图逃往西方。

我还没有删除右边列上的图像的页边距设置，如下所示：

<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>

...and现在有了很大的改进:边界看起来很好：

​

​

...but我真的不想让图像像那样拥抱左边，所以会调整左边的边缘值.我将CSS类中的页边距改为60：

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

...and，这没什么区别。什么？！？但是，如果我直接在最后/底部的图像中添加60的空白，如下所示：

<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合并到行并向图像中添加60的内联左边距时，才能这样做，例如：

<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>

不过，让我担心的是，我给这些图片添加了60 of，当在较小的设备(平板电脑和手机)上观看时，它会变得不舒服。这些图像会溢出他们的边界并入侵邻国，很可能.

​

​

Answer 1

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

.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;
}

此填充用于补偿行中的引导设置的空白，如下面的代码所示：

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

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

这门课的内容如下：

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，那么您可能需要调整一部分div在col-6中才能得到一些空间。

Answer 2

添加.no-gutters类和.row。

如果需要填充到.col类中，使用间距公用设施。例如.px-md-5或px-5

无排水沟

自举文档

我们预定义的网格类中的列之间的排水沟可以用.no-gutters删除。这消除了.row中的负边距和所有直接子列中的水平填充。

下面是创建这些样式的源代码。注意，列重写的作用域仅限于第一个子列，并且是通过属性选择器锁定的。虽然这会生成一个更具体的选择器，但是可以使用间距公用设施进一步定制列填充。

需要从边缘到边缘的设计？删除父.container或.container-fluid。

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

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