3つのHTML列の間のスペースを削除する

Question

以下のコードでは、私は約255pxにスペースを減らしたい3 col-md-4があります。私はそれらの間のマージンを減らしてみました。最初と最後の列の左と右のパディングをそれぞれ増やしています。このアプローチの問題点は、ウィンドウのサイズを操作すると、パディングが増えたためにイメージの列がオフセットされることです。

HTML：

<div class="cards"> 
    <div class="container"> 
    <h2> 
     Our Expertise. 
    </h2> 
    </div> 
    <div class="row"> 
    <div class="col-md-4"> 
    <!-- <img> --> 
    <!-- <img> --> 
    <!-- <img> --> 
    </div> 
    <div class="col-md-4"> 
    <!-- <img> --> 
    <!-- <img> --> 
    <!-- <img> --> 
    </div> 
    <div class="col-md-4"> 
    <!-- <img> --> 
    <!-- <img> --> 
    <!-- <img> --> 
    <!-- <img> --> 
    </div> 
    </div> 
</div> 

はCSS：

html, body { 
margin: 0; 
padding: 0; 
font-family: 'Libre Baskerville', sans-serif; 
} 

    .first { 
    padding-left: 200px !important; 
    } 

    .last { 
    padding-right: 200px !important; 
    } 

    .container { 
    max-width: 980px; 
    margin: 0 auto; 
    } 

    .header { 
    padding-top: 20px; 
    } 

    .header h1 { 
    font-size: 20px; 
    } 

    .nav li { 
    margin: 0px; 
    border: 0px; 
    } 
    .nav li a { 
    color: #333; 
    } 

    .jumbotron { 
    background-color: transparent; 
    padding-top: 100px; 
    padding-bottom: 100px; 

    } 
    .jumbotron h2  { 
    font-size: 50px; 
    } 
    .jumbotron h2 span { 
    color: #ffc200; 
    } 

    .banner { 
    background-color: #333; 
    height: 140px; 
    color: white; 
    text-align: center; 
    padding-top: 30px; 
    } 

    .cards { 
    background-color: #FFC200; 
    text-align: center; 
    } 

    .cards img { 
    margin-bottom: 25px; 
    padding: auto; 
    } 

    .cards h2 { 
    margin-top: 20px; 
    margin-bottom: 80px; 
    } 

    @media (max-width: 992px) { 
    .col-md-4 { 
    margin: 0 auto 0; 
    text-align: center; 
    width: 100%; 
    } 

    .cards img { 
    width: 60%; 
    } 
    } 

@media (max-width: 500px) { 
    .header h1 { 
    text-align: center; 
} 

    .nav li { 
    text-align: center; 
    width: 100%; 
} 

    .cards img { 
    width: 100%; 
    } 
} 

あり、列の画像であることを仮定しているが、私は10個の担当者のポイントを持っていないので、それは私がそれらを投稿してみましょう文句を言いません。

Answer 1

デフォルトの列のパディングを変更するだけです。あなたが列間の偶数の合計スペースを確保する必要があるので、24が良いでしょう、あなたは単に12pxに15pxからデフォルトの列のパディングを変更するだろうし、同様の行に負のマージンをオーバーライドします。

.row { 
 
    margin-left: -12px!important; 
 
    margin-right: -12px!important; 
 
} 
 

 
div[class*='col-'] { 
 
    padding-left: 12px; 
 
    padding-right: 12px; 
 
} 
 

 
.inner { 
 
    border:1px solid black; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="cards"> 
 
    <div class="container"> 
 
    <h2> 
 
     Our Expertise. 
 
    </h2> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-md-4"> 
 
    <div class="inner">Column 1</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="inner">Column 2</div> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <div class="inner">Column 3</div> 
 
    </div> 
 
    </div> 
 
</div>