Question

如何使用Bootstrap在tumbnails上使用填充？

我不想在右边的4张图片上填充尽可能多的填充。

有没有办法使用框架来做到这一点？

任何帮助都是盛大的

    <div class="row">
        <!-- MAIN LEFT CONTENT! -->
        <div class="col-lg-9">

            <div class="panel panel-default">
                 <div class="panel-body">
                  <div class="alert alert-info">
                      <p><span>Pending approval</span>.Your profile is bring approved. This means others can't search for you just yet.</p>
                    </div>

                  <div class="row">
                  <div class="col-xs-7 col-md-5">
                   <div class="thumbnail">
                     <img src="http://placehold.it/800x700" alt="">
                     <div class="caption">
                         <h3>Username</h3>
                         <p>Clapham, London, UK</p>
                         <a href="#" class="btn btn-danger">Wink</a>
                         <a href="#" class="btn btn-default">Chat</a>
                       </div>
                     </div>
                   </div>
                  <div class="col-xs-7 col-md-7">
                     <div class="panel panel-default">
                         <div class="panel-heading">
                            New Members
                         </div>
                         <!-- /.panel-heading -->
                         <div class="panel-body">

                         <div class="col-lg-3 col-md-4 col-xs-6">
                            <a class="thumbnail" href="#">
                                <img class="img-responsive" src="http://placehold.it/400x300">
                            </a>
                        </div>

                                <div class="col-lg-3 col-md-4 col-xs-6">
                            <a class="thumbnail" href="#">
                                <img class="img-responsive" src="http://placehold.it/400x300">
                            </a>
                        </div>


                                <div class="col-lg-3 col-md-4 col-xs-6 ">
                            <a class="thumbnail" href="#">
                                <img class="img-responsive" src="http://placehold.it/400x300">
                            </a>
                        </div>
                                     <div class="col-lg-3 col-md-4 col-xs-6 ">
                            <a class="thumbnail" href="#">
                                <img class="img-responsive" src="http://placehold.it/400x300">
                            </a>
                        </div> 







                         </div>
                         <!-- .panel-body -->
                     </div>
                     <!-- /.panel -->
                 </div>
                  </div>





                 </div>
                <!-- /.panel-body -->
            </div>

Answer 1

这不是一个保证金问题，因为它是一个布局问题。您正在声明一个col-lg-3类，它将每列分成几个部分，每个部分占据空间的25％。

我会尝试将图像放在一个列中，然后应用带有display：inline-block等属性的CSS，以便它们水平排列。然后，您可以使用自己的样式表覆盖边距和填充。

Answer 2

根据我自己使用Bootstrap 2和3的经验，我没有在框架中看到任何内容让你改变分组或单个元素的填充。我总是必须隔离这些实例并将它们作为一个组或单独更改。

在Bootstrap缩略图上填充

2 个答案: