堆棧內存溢出
  簡體   English   中英

如何在不刪除引導的情況下減少填充或邊距

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

 原文  2017-11-03 17:28:35  1   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