Bootstrap 4：删除第

时间：2018-02-05 08:18:45

标签： grid bootstrap-4

如何在线上的最后一个元素中删除（仅限CSS）填充？ 如果使用out＆＃34; no-gutters＆＃34;：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 个答案:

答案 0 :(得分：0)

编辑：您的案例中的解决方案是将mr-2类的所有实例替换为mx-1。

mr-2表示：＆＃34;保证金权利2单位＆＃34;。 mx-1表示：＆＃34; 1个单位水平边距（两边）＆＃34;。

以下是工作代码（点击＆＃34;运行代码段＆＃34;按钮，然后展开到整页）：

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

删除填充：只需尝试此类P * -0（* - x，y，l，r）

x- Xaxis

y- yasis

l-左

r - 右

例如：我要删除右边的填充

HTML：

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

或通过css：

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

将div替换为各自的班级

相关问题
最新问题