Entfernen von Speicherplatz s/w zwei Spalten Bootstrap

Question

Hallo Ich versuche, weniger Platz s/w die zwei Bilder zu machen, aber ich bin dazu nicht in der Lage. Wenn ich eine CSS-Regel wie den Rand hinzufüge, werden die Spalten unterbrochen. Also, was ist der beste Weg, um Bilder ein bisschen näher zueinander zu bekommen.

meine Website Link: http://www.abiglittlebiz.com/trevelle/display-centres/

hier ist mein Code:

<div class="displaycenter"> 

    <h2 class="displayh1"><?php echo "$main_heading";?></h2> 
<div class="container"> 
    <div class="row"> 
    <div class="col-md-8"> 
     <h2 class="displayh2"><?php echo "$display_heading";?></h2> 
<div> 
     <?php if(!empty($ascot_image)): ?> 
     <img src="<?php echo $ascot_image['url']; ?>" alt="<?php echo $ascot_image['alt']; ?>"> 
     <?php endif; ?> 
<div class="caption checkout-caption"> 
      <h3 id="newpro"><?php echo "$ascot_text"; ?></h3> 
    <p class="details"><?php echo "$displaycenter1";?></p> 
    </div> 
</div> 
     </div> 

<div class="col-md-4"> 
     <h2 class="displayh2"><?php echo "$display_heading2";?></h2> 
<div> 
     <?php if(!empty($liberty_image)): ?> 
     <img src="<?php echo $liberty_image['url']; ?>" alt="<?php echo $liberty_image['alt']; ?>"> 
     <?php endif; ?> 
<div class="caption checkout-caption"> 
      <h3 id="newpro"><?php echo "$liberty_text"; ?></h3> 
<p class="details"><?php echo "$displaycenter2";?></p> 
    </div> 
    </div> 
    </div> 
     <div class="col-md-8"> 
<div> 
     <?php if(!empty($alfa_image)): ?> 
     <img src="<?php echo $alfa_image['url']; ?>" alt="<?php echo $alfa_image['alt']; ?>"> 
     <?php endif; ?> 
<div class="caption checkout-caption"> 
      <h3 id="newpro"><?php echo "$alfa_text"; ?></h3> 
    <p class="details"><?php echo "$displaycenter3";?></p> 
    </div> 
</div> 
</div> 
<div class="col-md-4">  
<div> 
<?php if(!empty($odyssey_image)): ?> 
     <img src="<?php echo $odyssey_image['url']; ?>" alt="<?php echo $odyssey_image['alt']; ?>"> 
     <?php endif; ?> 
<div class="caption checkout-caption"> 
      <h3 id="newpro"><?php echo "$odyessy_text"; ?></h3> 
    <p class="details"><?php echo "$displaycenter4";?></p> 
    </div> 

    </div> 
    </div> 
    <div id="cs"> 
<h2 class="displayh1" id="cl"><?php echo "$second_heading";?></h2> 

    <div class="col-md-8"> 
<div> 
     <?php if(!empty($monte_image)): ?> 
     <img src="<?php echo $monte_image['url']; ?>" alt="<?php echo $monte_image['alt']; ?>"> 
     <?php endif; ?> 
<div class="caption checkout-caption"> 
      <h3 id="newpro"><?php echo "$monte_text"; ?></h3> 
    <p class="details"><?php echo "$displaycenter5";?></p> 
    </div> 
</div> 
</div> 

<div class="col-md-4"> 
<div> 
     <?php if(!empty($lot_image)): ?> 
     <img src="<?php echo $lot_image['url']; ?>" alt="<?php echo $lot_image['alt']; ?>"> 
     <?php endif; ?> 
<div class="caption checkout-caption"> 
     <h3 id="newpro"><?php echo "$monte_text"; ?></h3> 
    <p class="details"><?php echo "$displaycenter6";?></p> 
    </div> 
</div> 
</div> 

    </div> 
    </div> 

</div> 
</div> 

<?php get_footer(); ?> 

Answer 1

Sie verwenden eine col-md-8 Klasse für die linke Spalte und eine col-md-4 Klasse für das richtige. Warum nicht beide col-md-6 und wenden Sie die folgenden CSS?

.row .col-md-6:first-of-type { 
    text-align: right; 
} 

Dieses Recht richtet den Inhalt in der linken Spalte aus und eliminiert den größten Teil der Lücke zwischen den Spalten. Du wirst wahrscheinlich mit mehr CSS spielen müssen, um die Dinge weiter zu verbessern, aber das sollte dir einen guten Start geben.