Question

当我把它们放在连续的列中时，我的png图像变得非常小。但是，如果没有列，它们就可以了，但它们不会显示为一行，而是显示在另一列之上。我不知道是什么导致了这个问题。

我想做什么：我希望它们看起来像这样。

<div class="container">
                <div class="row" id="parent">
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block left">
                        <div class="heading">
                            <h3> Simple to Enjoy </h3>
                        </div>
                        <div class="inside">
                            <div class="row">
                                <div class=""> <!--These Images!!!-->
                                    <img class="img img-responsive img-sec-4" src="images\home_section_4_free_ride.png">
                                    <p>Free Rides </p>
                                </div>
                                <div class="">
                                    <img class="img img-responsive img-sec-4" src="images\home_section_4_membership.png">
                                    <p>Free XXX Membership </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block center">
                        <div class="heading">
                            <h3> Simple to Earn </h3>
                        </div>
                        <div class="inside">
                        </div>
                    </div>
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block right">
                        <div class="heading">
                            <h3> Simple to Save </h3>
                        </div>
                        <div class="inside">
                        </div>
                    </div>
                </div>
            </div>

抱歉英语不好，缩进。

这是我的CSS：

#parent {
        text-align:center;
        height:400px;
        width:100%;
    }
.center {
margin:auto
}
.left {
margin:auto auto auto 0;
}
.right {
margin:auto 0 auto auto;
}

.img-sec-4 {
height: auto;
width: auto;
}

编辑：这是我的结果的屏幕截图：（红色突出显示的区域是问题所在）

Answer 1

只需将类col-xs-6添加到包装这些图像（每个）的div中

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row" id="parent">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block left">
      <div class="heading">
        <h3> Simple to Enjoy </h3>
      </div>
      <div class="inside">
        <div class="row">
          <div class="col-xs-6">
            <!--These Images!!!-->
            <img class="img img-responsive img-sec-4" src="//lorempixel.com/200/200">
            <p>Free Rides</p>
          </div>
          <div class="col-xs-6">
            <img class="img img-responsive img-sec-4" src="//lorempixel.com/200/200">
            <p>Free XXX Membership</p>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block center">
      <div class="heading">
        <h3> Simple to Earn </h3>
      </div>
      <div class="inside">
      </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 block right">
      <div class="heading">
        <h3> Simple to Save </h3>
      </div>
      <div class="inside">
      </div>
    </div>
  </div>
</div>

当我把它放在一个列中时，图像变得非常小

1 个答案: