Прокладка на Bootstrap Thumbnails

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

Из моего собственного опыта, используя Bootstrap 2 и 3, я ничего в рамках, давайте изменить отступы для групп или отдельных элементов не видели , Я всегда должен был изолировать эти экземпляры и изменить их как группу или индивидуально.

Answer 2

Это не столько проблема маржи, сколько проблема с макетом. Вы объявляете класс col-lg-3, который делит каждый столбец на разделы, каждый из которых занимает 25% пространства.

Я бы постарался разместить изображения в одном столбце, а затем применить CSS с такими атрибутами, как display: inline-block, чтобы они выравнивались горизонтально. Затем вы можете переопределить поля и отступы своей собственной таблицей стилей.