col-padding-如何在Bootstrap 3网格系统中调整装订线

Question

How do I reduce the precise gap between the columns so the width of all col remain same and keeping them even with the rest of the page.

 .blackbox { color: #fff; background: #000; } .content { background: #4679BD; } .pad-5 [class*="-3"] { padding-left:5px; padding-right:5px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="blackbox">Hey. I'Black Box</div> </div> </div> <div class="row pad-5"> <div class="col-xs-3"> <div class="content"> <p>Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content</p> </div> </div> <div class="col-xs-3"> <div class="content"> <p>Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content</p> </div> </div> <div class="col-xs-3"> <div class="content"> <p>Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content</p> </div> </div> <div class="col-xs-3"> <div class="content"> <p>Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content</p> </div> </div> </div> </div> 

Note:

• I tried couple of solutions from different answers asked here on SO but no luck or may be I'm missing something obvious.
• <div class="col-xs-3"></div> is inside for each loop.

Fiddle

Answer 1

You can simply add in the CSS file the folowing code:

.content{
    margin-left: -10px;
}

or another solution you can add new class: For Example:

<div class="content removespace">
<p>text here</p>
</div>

and new css class:

.removespace{
    margin-left: -10px;
}

Vote up if this helped you

https://jsfiddle.net/Last_Fl00r/xqmfqe1h/

Answer 2

as you reduce the padding of col from 15px to 5px the <div class="row"> which has margin left and right 15px causing the col uneven, simple solution of this is adjust the margin left and right of <div class="row"> change its value from 15px to -5px and it will push back the cols inside and make them even and col's width will remain same and it doesn't effect the responsiveness. just add following css to your style sheet

.pad-5 {
    margin-left: -5px;
    margin-right: -5px;
}

 .blackbox { color: #fff; background: #000; } .content { background: #4679BD; } .pad-5 { margin-left: -5px !important; margin-right: -5px !important; } .pad-5 [class*="-3"] { padding-left:5px; padding-right:5px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="blackbox">Hey. I'Black Box</div> </div> </div> <div class="row pad-5"> <div class="col-xs-3"> <div class="content"> <p>Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content</p> </div> </div> <div class="col-xs-3"> <div class="content"> <p>Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content</p> </div> </div> <div class="col-xs-3"> <div class="content"> <p>Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content</p> </div> </div> <div class="col-xs-3"> <div class="content"> <p>Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content Test Content</p> </div> </div> </div> </div>