元素大于列大小

Question

我对bootstrap列有一点问题：即使列宽为316px，列内的图像也会有317px的宽度，因此1px的图像会被遗漏，看起来很难看。这是一些屏幕： 在这里，您可以看到列宽为316px：http://i.imgur.com/AFBXmhE.png 在这里你可以看到图像宽度是317px而且我指出了被div忽略的图像的1px：http://i.imgur.com/c2s0VG8.png

这是HTML代码：

<div class = "properties">
        <div class = "row">
            <div class = "col-xs-12 col-sm-6 col-md-4">
                <div class = "row">
                    <div class = "col-xs-12 col-sm-10 col-md-10 pull-left col-sm-offset-1">
                        <img src = "<?php bloginfo('template_directory'); ?>/images/parallax/apartment2.png" class = "img-responsive">
                        <div class = "full">
                        </div>
                        <div class = "animborder"></div>
                        <div class = "estatedes">
                            <span>2,000sqft</span>
                        </div>
                        <div class = "estatetitle">Modern Apartment</div>
                    </div>
                </div>
            </div>
            <div class = "col-xs-12 col-sm-6 col-md-4">
                <div class = "row">
                    <div class = "col-xs-12 col-sm-10 col-md-10 pull-left col-sm-offset-1">
                        <img src = "<?php bloginfo('template_directory'); ?>/images/parallax/apartment2.png" class = "img-responsive">
                        <div class = "full">
                        </div>
                        <div class = "animborder"></div>
                        <div class = "estatedes">
                            <span>2,000sqft</span>
                        </div>
                        <div class = "estatetitle">Modern Apartment</div>
                    </div>
                </div>
            </div>
            <div class = "col-xs-12 col-sm-6 col-md-4">
                <div class = "row">
                    <div class = "col-xs-12 col-sm-10 col-md-10 pull-left col-sm-offset-1">
                        <img src = "<?php bloginfo('template_directory'); ?>/images/parallax/apartment2.png" class = "img-responsive">
                        <div class = "full">
                        </div>
                        <div class = "animborder"></div>
                        <div class = "estatedes">
                            <span>2,000sqft</span>
                        </div>
                        <div class = "estatetitle">Modern Apartment</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

这是CSS：

.properties .row {
margin: 0px;
padding: 0px;
}

.properties .row > div {
padding: 0px;
}

.properties .row .row > div {
background-color: #e9e9e9;
position: relative;
font-family: 'Lato', sans-serif;
max-width: 100%;
overflow: hidden;
height: 200px;
padding: 0px;
}

.properties .row .row > div img {
width: 100%;
}

.properties li .full {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #fff;
z-index: 1;

opacity: 0;

transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.properties li:hover {
cursor: pointer;
}

.properties li:hover .full {
opacity: 0.7;
}

.properties li:hover .animborder {
height: 100%;
}

.properties li:hover .estatedes {
background-color: #1abc9c;
color: #fff;
}

.animborder {
position: absolute;
bottom: 0;
left: 0;
width: 2px;
height: 0%;
background: #1abc9c;
transition: height 0.7s;
z-index: 3;
}

.estatedes {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 33px;
line-height: 33px;
background-color: #e9e9e9;
z-index: 2;

color: #586163;
font-size: 12px;
font-weight: 300;
text-indent: 7px;
}

.estatedes span {

}

.estatetitle {
position: absolute;
bottom: 33px;
left: 0px;
background-color: #1abc9c;
padding: 7px;
color: #fff;
}

我该怎么办？