Question

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

<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。

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

P.S。我还删除了.staircase_imgs课程，因为删除.row元素后不需要它。我还将一些标记（如a）重新排列到Bootstrap列元素中。这样，列元素周围的空白区域就无法点击。

Answer 2

删除您拥有的额外<div class="row">。这会为margin: 0 -15px;创建.col，但您在此-col中没有.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_3">
                                <div class="row"> <!-- REMOVE THIS DIV -->
                                    <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>

Answer 3

首先，您应将a标记放在bootstrap列中，以便位于该填充列中。其次，您添加了不必要的.row类。你的结构应该是这样的：

 <div class="col-xs-12 col-sm-6 col-md-3 col_divide">
            <div class="row text_center">
                    <div class="col-md-12">
                        <div id="inner_cont_1">
                             <a href="#" class="image_link_styling">
                                <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">

                                 </a>
                            </div>
                    </div>
            </div>
        </div>

我弄错了你的代码：fiddle

希望这有帮助！

Answer 4

您的<a>标记开始于<img>标记之外。不要在多个link上使用<div>，而是在<a>附近放置<img>标记，请参阅下面的示例：

<div class="col-md-12">
  <a href="..">
    <img src="..." class="img-responsive">
  </a>
</div>

Bootstrap默认填充和边距导致图像在容器外伸展

4 个答案: