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

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>