CSS中的Bootstrap列填充约束

Question

演示http://www.bootply.com/stuqpDhmWp

正如您在上面的演示中所看到的，我的img是100％，但img之间的填充太大，因为左右总计是30px。我希望它可能只是15px的一面。什么黑客呢？

Answer 1

.container .col-md-3{ padding:0px 7.5px}

.container .col-md-3:first-child {padding-left:15px;}
.container .col-md-3:last-child {padding-right:15px;}

它会解决你的问题

Answer 2

试试这个：

为避免填充使用row，特别是col

DEMO

<div class="container">

    <div class="row">
        <div class="col-lg-3 col-md-3">
            <img src="http://i.imgur.com/NRAVLP1.png">
        </div>

        <div class="col-lg-3 col-md-3 row">
            <img src="http://i.imgur.com/NRAVLP1.png">
        </div>

        <div class="col-lg-3 col-md-3 ">
            <img src="http://i.imgur.com/NRAVLP1.png">
        </div>

        <div class="col-lg-3 col-md-3 row">
            <img src="http://i.imgur.com/NRAVLP1.png">
        </div>

    </div>
</div>

Answer 3

<div class="container">                         

    <div class="row">
            <div class="col-lg-3 col-md-3 col-padding">
                    <img src="http://i.imgur.com/NRAVLP1.png">
            </div>

            <div class="col-lg-3 col-md-3 col-padding">
                    <img src="http://i.imgur.com/NRAVLP1.png">
            </div>

            <div class="col-lg-3 col-md-3 col-padding">
                    <img src="http://i.imgur.com/NRAVLP1.png">
            </div >
            <div class="col-lg-3 col-md-3 col-padding">
                    <img src="http://i.imgur.com/NRAVLP1.png">
            </div>

        </div>  
    </div>

的CSS：

.col-padding{padding-right: 0}
.col-padding:last-child{padding-right: 15px}