How can I make bootstrap 4 columns-gutters equal to container padding?

问题

I am currently using bootstrap 4. In my code, gap between two item (.items) is 30px due to bootstrap two columns padding. But container has padding 15px. I think if gap between two items is 15px which is equal to container padding would be better looking. How can I do that?

  <head>
    <meta charset="utf-8">	
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel = 'stylesheet' href = 'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'/>
 
  </head>
  
  <body>
 <div class="container-fluid">
     <div class="row">
   <div class = 'col-sm'>
     <div class = 'bg-primary items'>A</div>
   </div>
   <div class = 'col-sm'>
     <div class = 'bg-success items'>B</div>
   </div>
   <div class = 'col-sm'>
     <div class = 'bg-info items'>C</div>
   </div>
  </div>
 </div>


  </body>

回答1:

30px padding means it will be divided as 15px left and 15px right padding for div. So what is happening is, it is adding 15px padding from first(right side padding) and second div(left side padding) at center. So here is the solution:

    div class="container-fluid">
     <div class="row">
   <div class = 'col-sm'>
     <div class = 'bg-primary items'>A</div>
   </div>
   <div class = 'pl-0 col-sm'>
     <div class = ' bg-success items'>B</div>
   </div>
   <div class = ' pl-0 col-sm'>
     <div class = ' bg-info items'>C</div>
   </div>
  </div>
 </div>

This is what I changed: Added "pl-0" bootstrap class to second and third div. Hope it works!

回答2:

You could simply remove padding from the middle column using px-0...

<div class="container-fluid border">
    <div class="row">
        <div class="col-sm">
            <div class="bg-primary items">A</div>
        </div>
        <div class="col-sm px-0">
            <div class="bg-success items">B</div>
        </div>
        <div class="col-sm">
            <div class="bg-info items">C</div>
        </div>
    </div>
</div>

Or, use a special CSS class to override Bootstrap's gutter (=7.5px) ...

.p-row-sm {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

.p-row-sm > div[class^="col"] {
    padding-left: 7.5px;
    padding-right: 7.5px;
}

Demo: https://www.codeply.com/go/SZcY3X4hTY

回答3:

You can use Bootstrap utility classes to tackle this. Here's an example from my project:

<div class="row">
  <div class="col-lg-6 pr-lg-2">...</div>
  <div class="col-lg-6 pl-lg-2">...</div>
</div>

The idea is very simple: I apply half-gutters when my screen is big enough to show both columns.

Please note that I use 1rem gutters and pr-lg-2/pl-lg-2 gives me .5rem padding. You might want to use different values according to your Bootstrap config e.g. pr-lg-1 or pr-lg-3.

回答4:

There are several issues at play with the issue described above. When viewing a BS grid layout on mobile (col or xs) the container padding is removed. As a result, the combined left and right inner padding of a two-column layout make it look out of balance (too much padding between columns).

The solution, in theory, is straight forward. remove the left or right padding globally. However, this will result in other imbalances, and if you are working and a layout that has a variable number of items difficult to predict. The solution is to remove half of the right padding on the odd column elements and half the left padding on the even column elements using the :nth-child(even/odd) selector. see the solution here BS4 Reduce Padding Between 2-Up Grid Cards on Mobile

来源：https://stackoverflow.com/questions/52566981/how-can-i-make-bootstrap-4-columns-gutters-equal-to-container-padding

标签

css

bootstrap-4