html - Bootstrap 默认填充和边距导致图像拉伸(stretch)到容器外

Question

我的图像被拉伸(stretch)到 bootstrap 用来划分列的填充/边距。我想保持列分开但不拉伸(stretch)图像。我已经能够使用填充缩小图像，但是列之间的空白是可点击的，这不是我想要的。

<div id="cont_divider" class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-3 col_divide">
                <div class="row text_center">
                    <a href="#" class="image_link_styling">
                        <div class="col-md-12">
                            <div id="inner_cont_1">
                                <div class="row">
                                    <p class="stair_image_font_style">Straight<br/>Staircase</p>

                                    <img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/straight.jpg" alt="straight staircase">
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-3 col_divide">
                <div class="row text_center">
                    <a href="#" class="image_link_styling">
                        <div class="col-md-12">
                            <div id="inner_cont_2">
                                <div class="row">
                                    <p class="stair_image_font_style">Single Winder<br/>Staircase</p>

                                    <img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/single_winder.jpg" alt="straight staircase">
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-3 col_divide">
                <div class="row text_center">
                    <a href="#" class="image_link_styling">
                        <div class="col-md-12">
                            <div id="inner_cont_3">
                                <div class="row">
                                    <p class="stair_image_font_style">Double Winder<br/>Staircase</p>

                                    <img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/double_winder.jpg" alt="straight staircase">
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-3 col_divide">
                <div class="row text_center">
                    <a href="#" class="image_link_styling">
                        <div class="col-md-12">
                            <div id="inner_cont_4">
                                <div class="row">
                                    <p class="stair_image_font_style">Triple Winder<br/>Staircase</p>

                                    <img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/triple_winder.jpg" alt="straight staircase">
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>

CSS:

#inner_cont_1{
    background-color: #336699;
}

#inner_cont_2{
    background-color: #cc6633;
}

#inner_cont_3{
    background-color: #ff6633;
}

#inner_cont_4{
    background-color: #ffcc66;
}

.staircase_imgs{
    box-sizing: border-box;
    width: 100%;
    display: block;
    padding: 0 1.238em 0.3em 1.238em;
}

.stair_image_font_style{
    font-size: 2em;
    color: #ffffff;
    line-height: 1em;
    padding: 0.8em 0.938em;
    margin: 0;
}

.col_divide{
    margin-top: 1em;
    margin-bottom: 1em;
}

Answer 1

那是因为您使用的是 .row 而没有 .col- 类。 .row 具有负的左右边距，这会将内容区域扩展到父元素之外。 .col- 类的填充消除了这种影响。删除 .row。

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

#inner_cont_1 {
  background-color: #336699;
}

#inner_cont_2 {
  background-color: #cc6633;
}

#inner_cont_3 {
  background-color: #ff6633;
}

#inner_cont_4 {
  background-color: #ffcc66;
}

.stair_image_font_style {
  font-size: 2em;
  color: #ffffff;
  line-height: 1em;
  padding: 0.8em 0.938em;
  margin: 0;
}

.col_divide {
  margin-top: 1em;
  margin-bottom: 1em;
}

<div id="cont_divider" class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 col_divide">
      <div class="row text_center">
        <div class="col-md-12">
          <a href="#" class="image_link_styling">
            <div id="inner_cont_1">
                <p class="stair_image_font_style">Straight<br/>Staircase</p>
                <img class="img-responsive" src="http://placehold.it/600x400/fc0" alt="straight staircase">
            </div>
          </a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-3 col_divide">
      <div class="row text_center">
        <div class="col-md-12">
          <a href="#" class="image_link_styling">
            <div id="inner_cont_2">
                <p class="stair_image_font_style">Single Winder<br/>Staircase</p>

                <img class="img-responsive" src="http://placehold.it/600x400/fc0" alt="straight staircase">
            </div>
          </a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-3 col_divide">
      <div class="row text_center">
        <div class="col-md-12">
           <a href="#" class="image_link_styling">
            <div id="inner_cont_3">
                <p class="stair_image_font_style">Double Winder<br/>Staircase</p>
                <img class="img-responsive" src="http://placehold.it/600x400/fc0" alt="straight staircase">
            </div>
          </a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-md-3 col_divide">
      <div class="row text_center">
        <div class="col-md-12">
          <a href="#" class="image_link_styling">
            <div id="inner_cont_4">
                <p class="stair_image_font_style">Triple Winder<br/>Staircase</p>
                <img class="img-responsive" src="http://placehold.it/600x400/fc0" alt="straight staircase">
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

附言我还删除了您的 .staircase_imgs 类，因为一旦您删除了 .row 元素就不需要它了。我还重新排列了您的一些标记，如 a 到 Bootstrap 列元素内。这样，列元素周围的空白就不可点击了。