堆栈内存溢出
  繁体   English   中英

如何在不删除引导的情况下减少填充或边距

[英]how to reduce the padding or margin without deleting it bootstrap

 原文  2017-11-03 17:28:35  8   3    html/ css/ twitter-bootstrap/ bootstrap-4

问题描述

我对网格系统有疑问，这很简单，但目前我很挣扎，可以说我需要对引导网格进行正确的实现，而我试图用引导进行此示例：

例

所以我认为这很容易做到，但是由于某种原因，我的方式不正确，或者可能是，因为使用下一个代码： 

<div class="container bank-payment">
  <div class="row">
    <div class="col-xs-6 col-md-3 image-bank">
      <img src="http://via.placeholder.com/90x28">
    </div>
    <div class="col-xs-6 col-md-3 image-bank">
      <img src="http://via.placeholder.com/90x28">
    </div>
    <div class="col-xs-6 col-md-3 image-bank">
      <img src="http://via.placeholder.com/90x28">
    </div>
    <div class="col-xs-6 col-md-3 image-bank">
      <img src="http://via.placeholder.com/90x28">
    </div>
  </div>
  <div class="row bank-payment">
    <div class="col-xs-6 col-md-2 image-bank">
      <img src="http://via.placeholder.com/90x28">
    </div>
    <div class="col-xs-6 col-md-2 image-bank">
      <img src="http://via.placeholder.com/90x28">
    </div>
    <div class="col-xs-6 col-md-2 image-bank">
      <img src="http://via.placeholder.com/90x28">
    </div>
    <div class="col-xs-6 col-md-2 image-bank">
      <img src="http://via.placeholder.com/90x28">
    </div>
  </div>
</div>

我得到这个结果：

我的代码的结果

事情是...第一个对我来说是正确的，因为它符合标准的条件，但是它们之间的间隔很长，我需要为左右两边的每张图像都放置8px的空间，但是第二行也满足条件以减少空间，但不符合标准...所以我怎么解决这部分？

这里是我的CSS代码： 

.bank-payment {
      text-align: center;

      .image-bank {
        //margin-bottom: 8px;
        margin-top: 8px;
        //margin-right: 8px;
        vertical-align: middle;
        display: inline-block;
      }
    }

3 个解决方案

解决方案1
 0  2017-11-03 17:51:06

要获取徽标以填充列的空间，请使用“ img响应”类。 它将消除长距离。 唯一的问题是，如果您使用宽度为1200px或最小宽度为1200px的容器类，徽标将显得非常大。 因此，更好的解决方案是将行列放在具有三个“ col-md-4”列的另一行列中。 只需将徽标框添加到中间即可。 

<div class="container bank-payment">

    <div class="row">
      <div class="hidden-xs col-md-4">
      </div>
      <div class="col-xs-12 col-md-4">

        <div class="row">
          <div class="col-xs-6 col-md-3 image-bank">
            <img src="http://via.placeholder.com/90x28" class="img-responsive" >
          </div>
          <div class="col-xs-6 col-md-3 image-bank">
            <img src="http://via.placeholder.com/90x28" class="img-responsive" >
          </div>
          <div class="col-xs-6 col-md-3 image-bank">
            <img src="http://via.placeholder.com/90x28" class="img-responsive" >
          </div>
          <div class="col-xs-6 col-md-3 image-bank">
            <img src="http://via.placeholder.com/90x28" class="img-responsive" >
        </div>
      </div>

    </div>
    <div class="hidden-xs col-md-4">
    </div>
  </div>

</div>

解决方案2
 0 已采纳  2017-11-03 17:51:12

Bootstrap网格系统的以下两个部分将解决您的问题：

https://v4-alpha.getbootstrap.com/layout/grid/#horizo​​ntal-alignment
https://v4-alpha.getbootstrap.com/layout/grid/#offsetting-columns

在这里，您可以举例说明如何设置每列的位置。

可能您将不需要Display：inline-block，因为引导网格系统已经可以正确显示它了。 如果您确实需要一个示例，请告诉我，但是我认为上面的链接将为您提供帮助。

编辑
要使其完全符合Bootstrap的预期确实很困难，因此我创建了自己的类，看看它是否对您有帮助： 

<head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <style>
        @media (max-width: 768px) {

            .center-content {
                display: block;
                margin: auto;
                width: 420px;
            }

            .col-md-2_6 {
                flex: 0 0 50%;
                max-width: 50%;
                position: relative;
                width: 100%;
                min-height: 1px;
                padding-right: 15px;
                padding-left: 15px;
                margin-bottom: 5px;
            }

            .devices-disappear {
                display: none;
                width: 0;
                height: 0;
            }

        }

        @media (min-width: 769px) {
            .coloriz-margin {
                min-height: 28px;
                min-width: 90px;
                font-size: 16px;
            }

            .coloriz {
                border: 1px solid black;
                min-height: 28px;
                min-width: 90px;
                font-size: 16px;
            }

            img {
                display: block;
                margin: auto;
                height: 28px;
                width: 90px;
            }

            .center-content {
                display: block;
                margin: auto;
                width: 640px;
            }

            .col-md-2_6 {
                flex: 0 0 20%;
                max-width: 20%;
                position: relative;
                width: 100%;
                min-height: 1px;
                padding-right: 15px;
                padding-left: 15px;
                margin-bottom: 5px;
            }            
        }

    </style>

</head>

<body>
    <div class="center-content">
        <div class="row">
            <div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
            <div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
            <div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
            <div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
            <div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
            <div class="devices-disappear col-md-2_6 coloriz-margin"><!-- let empty to occupy the white space--></div>
            <div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
            <div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
            <div class="col-md-2_6 coloriz-margin"><img src="https://via.placeholder.com/90x28"></div>
            <div class="devices-disappear col-md-2_6 coloriz-margin"><!-- let empty to occupy the white space--></div>
        </div>
    </div>
</body>

这使列使用正确的大小。
请记住，我使用了最新的Bootstrap（4.0 beta）

解决方案3
 0  2017-11-03 18:14:25

我不是引导的忠实拥护者，尤其是在网格系统方面。 Flexbox的效果要好得多，并且有一些干燥器代码。 

 .bank-payment {
   display: flex;
   max-width: 490px;
   flex-wrap: wrap;
   justify-content: center;
 }

 .image-bank {
   margin: 8px 4px;
 }

我知道您是在专门询问引导程序，但要获得所需的结果，而要减少响应速度。 删除引导程序类和行以避免混淆。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何通过引导程序响应地使用边距和填充 如何在像素中使用 bootstrap 4 边距和填充属性？ 在 Bootstrap 中删除填充/边距 HTML边距/填充自举3 没有填充/边距的引导表？ 如何减少bootstrap面包屑的高度和文本填充？ 如何随着屏幕尺寸的变化自动减少或增加内容填充/边距？ 如何在不使用填充/边距的情况下为内部div设置边距 bootstrap减少行填充 边距或填充不能与引导表一起使用
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM