Bootstrap 3缩略图显示缩略图外的内容

时间:2014-08-14 17:13:25

标签: css twitter-bootstrap twitter-bootstrap-3

我在Bootstrap 3上的缩略图有问题。

我在这个缩略图中有一个缩略图我显示一个标题,图像和图像下方两列,以列表形式显示内容。如下所示;

image1

然而;我的代码显示缩略图下方的列表,如此处所示;

image2

我似乎无法将列表移动到缩略图中,我无法思考为什么。

这是代码问题

            <div class="col-md-4 col-sm-6">
                <div class="thumbnail">
                     <h4 align="center">Landscaping & Ground Work</h4>
                         <img src="/images/icons/garden.png" alt="Landscaping & Ground Work">

                         <div ="row">
                              <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                   <ul class="">
                                       <li>test</li>
                                       <li>test</li>
                                   </ul>
                              </div>
                              <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                   <ul class="">
                                       <li>test</li>
                                       <li>test</li>
                                   </ul>
                              </div>
                         </div>
                </div>
            </div>

提前多多感谢!

1 个答案:

答案 0 :(得分:0)

在我关闭行div之后和关闭缩略图div之前添加<div style="display:block;clear:both"></div>

并更改<div ="row"> to <div class="row">

<div class="col-md-4 col-sm-6">
                <div class="thumbnail">
                     <h4 align="center">Landscaping & Ground Work</h4>
                         <img src="/images/icons/garden.png" alt="Landscaping & Ground Work">

                         <div ="row">
                              <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                   <ul class="">
                                       <li>test</li>
                                       <li>test</li>
                                   </ul>
                              </div>
                              <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
                                   <ul class="">
                                       <li>test</li>
                                       <li>test</li>
                                   </ul>
                              </div>
                         </div>
                    <div style="display:block;clear:both"></div>
                </div>
            </div>