在 Bootstrap 中的列之间减少 Space

Question

我已经检查了其他问题，但我无法减少单行中 bootstrap 的不同列之间的 space。我想要使用 Bootstrap 类在一行中的 4 个 div，但是这 4 个 div 之间的 space 很大，我不想要。虽然我也使用了容器，但它减少了 space 一点，但仍然太多了。 Spaces

body{
            padding: 0;
            margin: 0;
            background-image: url('Main backgrounds/cool-background\ \(1\).png');
            background-size: cover;
            height: 100%;
            font-family: 'Montserrat';
            overflow-x: hidden;
        }
        .heading{
            color: white;
            text-align: center;
            padding-top: 15px;
        }
        .boxesText{
            color: white;
        }
        .b1{
            width: 80px;
            height: 80px;
            background-color: aqua;
            border-radius: 4px;
            margin: 0 auto;
            position: relative;
            
        }
        i{
            font-size: 45px;
            text-align: center;
            position: absolute;
            /*TO MIDDLE AN ELEMENT IN DIV FROM ALL SIDES*/
            top: 50%;
            left: 50%;
            /* margin: -25px 0 0 -25px; */
            transform: translate(-50%, -50%);
            -webkit-filter: drop-shadow(5px 5px 5px #222);
            filter: drop-shadow(-5px 10px 7px #222);
        }
        .spacer{
            height: 6px;
        }
        .notification .badge {
            position: absolute;
            top: -10px;
            right: -10px;
            padding: 5px 10px;
            border-radius: 50%;
            background-color: red;
            color: white;
        }

<div class="container">
    <div class="row text-center boxesText">
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="b1">
                <i class="fa fa-comment" style="margin-top: -4px; margin-left: 2px;"></i>
            </div>
            <div class="spacer"></div>
            <span>Discuss</span>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="b1">
                <i class="fa fa-calendar-o"></i>
            </div>
            <div class="spacer"></div>
            <span>Booking</span>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="b1">
                <i class="fa fa-edit" style="margin-left: 4px;"></i>
            </div>
            <div class="spacer"></div>
            <span>Invoice</span>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="b1">
                <i class="fa fa-gear"></i>
            </div>
            <div class="spacer"></div>
            <span>Settings</span>
        </div>
</div>

Answer 1

不需要额外的 CSS，但您可能已经添加了 CSS，这很容易混淆 Bootstrap。

可能最有效的方法是将 gutters 添加到所有具有图标的列的 父 div。

<div class="row text-center boxesText g-1">

上面，我加了g-1。这是装订线尺寸 1。您最多可以使用 g-5，甚至可以使用 g-0 来表示没有装订线。

如果事实证明您实际上只想要左右排水沟或者您只想要垂直排水沟，那么试试这些。

gx-*  Horizontal gutter only
gy-*  Vertical gutter only

值得注意的是，您仍然需要尽可能多地填写这些栏目。现在你的图标是唯一的内容，无论你如何塑造列和排水沟，它们都将保持相同的大小。

还值得注意的是，上面的示例中似乎缺少结尾 </div>。

这是另一个答案....

将其全部放在 1 列中，然后使用 justify-content-evenly。这需要在第 1 列上 d-flex。

如果这个建议不太奏效，请尝试 justify-content-between。

请注意，b1、spacer 和 span 的每个实例现在都放在一个包含 div.

的容器中

<div class="container">
    <div class="row text-center boxesText">
        <div class="col-sm-12 col-md-6 col-lg-3 d-flex justify-content-evenly">

         <div>
            <div class="b1">
                <i class="fa fa-comment" style="margin-top: -4px; margin-left: 2px;"></i>
            </div>
            <div class="spacer"></div>
            <span>Discuss</span>
         </div>

         <div>
            <div class="b1">
                <i class="fa fa-calendar-o"></i>
            </div>
            <div class="spacer"></div>
            <span>Booking</span>
          </div>

          <div>
            <div class="b1">
                <i class="fa fa-edit" style="margin-left: 4px;"></i>
            </div>
            <div class="spacer"></div>
            <span>Invoice</span>
          </div>

         <div>
            <div class="b1">
                <i class="fa fa-gear"></i>
            </div>
            <div class="spacer"></div>
            <span>Settings</span>
          </div>

        </div>
    </div>
</div>

Answer 2

我改了代码，检查一下，相信这就是你要的结果。

body{
 padding: 0;
 margin: 0;
 background-image: url('Main backgrounds/cool-background\ \(1\).png');
 background-size: cover;
 height: 100%;
 font-family: 'Montserrat';
 overflow-x: hidden;
 background: #7bc8f8;
        }

.row.text-center.boxesText {
  display: flex;
  justify-content: center;
}

.boxesText {
  color: white;
  text-align: center;
}

.col-sm-12.col-md-6.col-lg-3 {
    display: block;
    padding: 0px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 5px;
}
        
.b1 {
  font-size: 30px;
  border-radius: 5px;
  text-align: center;
  background: aqua;
  margin-bottom: 4px;
}
 
.notification .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: red;
  color: white;
}
        
.heading {
  color: white;
  text-align: center;
  padding-top: 15px;
}

.fa {
    display: block;
    padding: 20px;
}

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">

    <div class="row text-center boxesText">
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="b1">
                <i class="fa fa-comment"></i>
            </div>
            <span>Discuss</span>
        </div>
        
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="b1">
                <i class="fa fa-calendar-o"></i>
            </div>
            <div class="spacer"></div>
            <span>Booking</span>
        </div>
        
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="b1">
                <i class="fa fa-edit"></i>
            </div>
            <span>Invoice</span>
        </div>
        
        <div class="col-sm-12 col-md-6 col-lg-3">
            <div class="b1">
                <i class="fa fa-gear"></i>
            </div>
            <span>Settings</span>
        </div>
</div>

Answer 3

<div class="container">
<div class="row">
    <!-- you can also resize the size of col-md-10 as of your need  -->
    <div class="col-md-10 mx-auto">
        <div class="row text-center boxesText">
            <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="b1">
                    <i class="fa fa-comment"></i>
                </div>
                <span>Discuss</span>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="b1">
                    <i class="fa fa-comment"></i>
                </div>
                <span>Discuss</span>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="b1">
                    <i class="fa fa-comment"></i>
                </div>
                <span>Discuss</span>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-3">
                <div class="b1">
                    <i class="fa fa-comment"></i>
                </div>
                <span>Discuss</span>
            </div>
        </div>
    </div>

在 Bootstrap 中的列之间减少 Space

Decrease Space between Columns in Bootstrap

html

css

bootstrap-4