css - 如何使用 bootstrap 重现现有的 html 设计

Question

我被要求使用 bootstrap 重现这个设计。以下为原创设计

这是原设计的Html代码

<style type="text/css">td img {display: block;}</style>

    <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="1280">

      <tr>
       <td><img src="images/decoupes/spacer.gif" width="1" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="684" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="1" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="1" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="97" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="31" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="61" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="83" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="105" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="216" height="1" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="1" height="1" alt="" /></td>
      </tr>

      <tr>
       <td colspan="10">





               <img src="moza-slider/sliders/1.jpg" width="1280" height="532">



       </td>
       <td><img src="images/decoupes/spacer.gif" width="1" height="532" alt="" /></td>
      </tr>




      <tr>
       <td rowspan="2" colspan="6"><img name="iimajinnewworkedon_r2_c1" src="images/decoupes/iimajin-new-worked-on_r2_c1.jpg" width="815" height="162" id="iimajinnewworkedon_r2_c1" alt="" /></td>
       <td colspan="3"><img name="iimajinnewworkedon_r2_c7" src="images/decoupes/iimajin-new-worked-on_r2_c7.jpg" width="249" height="1" id="iimajinnewworkedon_r2_c7" alt="" /></td>
       <td rowspan="2"><img name="iimajinnewworkedon_r2_c10" src="images/decoupes/iimajin-new-worked-on_r2_c10.jpg" width="216" height="162" id="iimajinnewworkedon_r2_c10" alt="" /></td>
       <td><img src="images/decoupes/spacer.gif" width="1" height="1" alt="" /></td>
      </tr>
    </table> 

现在为了使用 bootstrap 并使其响应，我将 4 个主切片放在一边，将 spacer.gif 放在一边，并像这样将它们与 bootstrap 一起使用

<div class="container">


<div class="row">

<div class="col-md-12  text_blanc"> 



<img src="moza-slider/sliders/1.jpg" width="1280" height="532"> 





 <div class="col-md-6 bg_black text_blanc black_menu_top"> 


   <a class="page-scroll text_blanc" href="#ojm1">HOME</a>


   &nbsp;&nbsp;&nbsp; 

    <a class="page-scroll text_blanc" href="#ojm2">WHO WE ARE</a>

    &nbsp;&nbsp;&nbsp; 

   <a class="page-scroll text_blanc" href="#ojm3">WHAT WE DO</a>

     &nbsp;&nbsp;&nbsp; 

      <a class="page-scroll text_blanc" href="#ojm4">THE PORTFOLIO</a>

      &nbsp;&nbsp;&nbsp; 


      <a class="page-scroll text_blanc" href="#ojm5">THE EVENTS</a>


       &nbsp;&nbsp;&nbsp; 



      <a class="page-scroll text_blanc" href="#ojm6"> REACHING US </a>



        &nbsp;&nbsp;&nbsp; 
</div>

<div class="col-md-3"> 
 <img name="iimajinnewworkedon_r3_c7" src="images/decoupes/iimajin-new-worked-on_r3_c7.jpg" width="249" height="162" id="iimajinnewworkedon_r3_c7" alt="" />
</div>

<div class="col-md-3"> 
<img name="iimajinnewworkedon_r2_c10" src="images/decoupes/iimajin-new-worked-on_r2_c10.jpg" width="216" height="162" id="iimajinnewworkedon_r2_c10" alt="" />
</div>



 </div>


</div> 










</div>

问题

当我使用 bootstrap 重现设计时，这就是我得到的

如您所见，右下角有一个空白，而原始设计上没有空格。

问题:

如何使图像下方的空白区域消失并使其看起来与下图中的原始设计完全一样？

Here is a demo of the Bootstrap version (the one i have to correct)

Answer 1

首先，您需要将底部的三个列放在一个 .row 中，例如:

<div class="row">
  col-md-6 bg_black text_blanc black_menu_top>...</div>
  ...
</div>

然后你需要给你的图像一个类。例如 .imgFull 并添加此 css 规则:

.imgFull { width: 100% }