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

时间：2017-11-03 17:28:36

标签： html css twitter-bootstrap bootstrap-4

我对网格系统有疑问，它很容易，但我现在正在努力，让我说我需要为引导网格做一个正确的实现，我是什么＆＃39 ;我试图用bootstrap做这个例子：

example

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

sc.addPyFile

我有这样的结果：

results of my code

事情是......第一个对我来说是正确的，因为它符合标准的条件，但它们之间的空间非常长，我需要在空间中为每个图像从右/左和下放入8px ，但第二排也符合条件，以减少空间，但它不符合标准...所以我怎么能解决这一部分???

这里是我的css代码：

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

3 个答案:

答案 0 :(得分：0)

要使徽标填充列的空间，请使用“img-responsive”类。它将消除长间距。唯一的问题是，如果您使用宽度为1200像素或最小宽度为1200像素的容器类，则徽标将显得非常大。因此，更好的解决方案是将行列放在具有三个“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>

答案 1 :(得分：0)

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

https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignment
https://v4-alpha.getbootstrap.com/layout/grid/#offsetting-columns

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

可能你不需要Display：inline-block，因为bootstrap网格系统已经有了正确显示它的方法。如果你真的需要一个例子，请告诉我，但我认为上面的链接会为你提供。

修改
真的很难让它完全像你在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）

答案 2 :(得分：0)

我不是引导程序的忠实粉丝，特别是在网格系统方面。 Flexbox工作得更好，并且是一个干燥的代码。

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

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

我知道你是专门询问引导程序，但要获得理想的结果，并尽量减少响应速度。删除引导类和行以避免混淆。

相关问题
最新问题