Question

您好我正在尝试减少两张图片的空间，但我无法这样做。当我添加任何css规则，如边距，它打破了列。那么什么是我可以让图像彼此更接近的最佳方式。

我的网站链接：http://www.abiglittlebiz.com/trevelle/display-centres/

这是我的代码：

<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

左侧列使用col-md-8类，右侧列使用col-md-4类。为什么不同时使用col-md-6并应用以下CSS？

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

此右对齐左列中的内容，消除了列之间的大部分差距。你可能不得不玩更多的CSS来进一步改进，但这应该给你一个不错的开始。

删除空格b / w两列Bootstrap

1 个答案: