html - Bootstrap 缩略图上的填充

Question

您如何使用 Bootstrap 处理缩略图的内边距？

我不想在右侧的 4 个图像上填充太多。

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

任何帮助都将是盛大的

http://jsfiddle.net/Ys54c/

    <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，以便它们水平排列。然后您可以使用自己的样式表覆盖边距和填充。