代码之家  ›  专栏  ›  技术社区  ›  6epcepk

引导程序4:删除行上最后一个网格元素右侧的填充

bootstrap-4 grid
  •  1
  • 6epcepk  · 技术社区  · 7 年前

    如何删除行上最后一个元素中的填充(仅限CSS)? 如果不使用“无排水沟”: https://www.codeply.com/go/p5kwypnNAw 有可能制作纯css美丽网格吗? 

    <div class="container" style="background: yellow;">
  <div class="row text-center text-lg-left no-gutters">
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="d-block mb-2 mr-2 h-100">
        <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="d-block mb-2 mr-2 h-100">
        <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="d-block mb-2 mr-2 h-100">
        <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="d-block mb-2 mr-2 h-100">
        <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="d-block mb-2 mr-2 h-100">
        <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="d-block mb-2 mr-2 h-100">
        <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="d-block mb-2 mr-2 h-100">
        <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="d-block mb-2 mr-2 h-100">
        <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="d-block mb-2 mr-2 h-100">
        <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="d-block mb-2 mr-2 h-100">
        <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="d-block mb-2 mr-2 h-100">
        <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
      </a>
    </div>
    <div class="col-lg-3 col-md-4 col-xs-6">
      <a href="#" class="d-block mb-2 mr-2 h-100">
        <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
      </a>
    </div>
  </div>
</div>

    没有排水沟的示例,您可以在此处看到: https://www.codeply.com/go/SM8kOTGbM5 主容器有黄色背景,所以您可以在右后的元素上看到添加的填充。

    2 回复  |  直到 7 年前
        1
  •  0
  •   WebDevBooster    7 年前

    编辑:您的解决方案是替换 mr-2 使用类 mx-1 .

    mr-2 表示:“右边距2个单位”。 mx-1 表示:“1单位水平边距(两侧)”。

    以下是工作代码(单击下面的“运行代码段”按钮并展开到整个页面): 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container px-0" style="background: yellow;">
    <div class="row text-center text-lg-left no-gutters">
        <div class="col-lg-3 col-md-4 col-6">
            <a href="#" class="d-block mb-2 mx-1 h-100">
                <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-6">
            <a href="#" class="d-block mb-2 mx-1 h-100">
                <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-6">
            <a href="#" class="d-block mb-2 mx-1 h-100">
                <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-6">
            <a href="#" class="d-block mb-2 mx-1 h-100">
                <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-6">
            <a href="#" class="d-block mb-2 mx-1 h-100">
                <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-6">
            <a href="#" class="d-block mb-2 mx-1 h-100">
                <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-6">
            <a href="#" class="d-block mb-2 mx-1 h-100">
                <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-6">
            <a href="#" class="d-block mb-2 mx-1 h-100">
                <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-6">
            <a href="#" class="d-block mb-2 mx-1 h-100">
                <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-6">
            <a href="#" class="d-block mb-2 mx-1 h-100">
                <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-6">
            <a href="#" class="d-block mb-2 mx-1 h-100">
                <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
            </a>
        </div>
        <div class="col-lg-3 col-md-4 col-6">
            <a href="#" class="d-block mb-2 mx-1 h-100">
                <img class="img-fluid img-thumbnail" src="http://placehold.it/600x600">
            </a>
        </div>
    </div>
</div>


<br><br><br><br>


<div class="container">
    <div class="row mt-5 justify-content-center">
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.netflix.com/fr/">
               <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.hulu.com">
               <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.netflix.com/fr/">
               <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.hulu.com">
               <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.netflix.com/fr/">
               <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.hulu.com">
               <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.netflix.com/fr/">
               <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.hulu.com">
               <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.netflix.com/fr/">
               <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.hulu.com">
               <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.netflix.com/fr/">
               <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.hulu.com">
               <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.netflix.com/fr/">
               <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.hulu.com">
               <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.netflix.com/fr/">
               <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.hulu.com">
               <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.netflix.com/fr/">
               <img src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/256/Netflix.png" alt="" class="card-img">
           </a>
        </div>
        <div class="card card-custom mx-2 mb-3">
            <a href="https://www.hulu.com">
               <img src="https://apprecs.com/ios-meta/app-icons/256/376510438.jpg" alt="" class="card-img">
           </a>
        </div>
    </div>
</div>
        2
  •  0
  •   pradeep kumar    7 年前

    删除填充:只需尝试这个类P*-0(*-x,y,l,r)

    x-x轴

    y-yasis

    l-左侧

    r-右侧

    例如:我要去掉右边的填充物,所以

    HTML: 

    <div class="pr-0">
----
----
----
</div>

    或通过css: 

    div:last-child {
padding-right:0px;
}

    用各自的类替换div

    推荐文章
    seriously  ·  按钮中元素的对齐
    3 年前
    USK  ·  引导模型在我的HTML文件中不起作用
    3 年前
    onit  ·  如何在单击按钮时从页面(引导程序4)隐藏或删除搜索表单?
    3 年前
    Noor ul ain Ibrahim  ·  如何在一行中制作两个大小相同的按钮?
    3 年前
    user9644796  ·  如何检查折叠的导航栏是否打开?
    7 年前
    JoeSlav  ·  使用引导上载损坏的文件
    7 年前
    John  ·  引导程序4,表单内联未在XS视图上对齐
    7 年前
    J. Sparks  ·  奇怪的图像定位(HTML、CSS、Bootstrap)
    7 年前
    user9719859  ·  如何在bootstrap 4中更改选择选项programmaticaly?
    7 年前
    im5an  ·  如何使用angular在单行中显示徽标和导航栏?
    7 年前
    关于  
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号