Question

我试图用左侧的徽标和右侧的行徽标创建bootstrap 3网站。

右行应该用全宽水平线隔开，如图所示。

我尝试使用hr元素使用创建水平ine

<section class='row'>
   <div class='col-lg-3 col-lg-offset-1'>
      <img src='StoreImage/Media/pv-logo.png' />
   </div>
   <div class='row'>
      <div class='col-lg-offset-2 col-lg-2'>
         <span>EST</span>
         <span>&nbsp;|&nbsp;</span>
         <span>ENG</span>
      </div>
      <div class='col-lg-offset-1 col-lg-2'>
         <span>SISENE</span>
         <span>&nbsp;|&nbsp;</span>
         <span>OSTUKORV</span>
      </div>
      <br>
      <hr style='border-top: 2px solid #b49258'>
      <div class='col-lg-offset-2 col-lg-4'>
         <span>MEIST </span>
         <span>&nbsp;|&nbsp;</span>
         <span>ILUBLOGI</span>
         <span>&nbsp;|&nbsp;</span>
         <img class="frame-21" src="StoreImage/Media/otsi.png"/>
         <span>  </span>
         <input placeholder='Otsi'/>
      </div>
   </div>
   </div>
</section>

但是水平线开始之前有一些空白。

也将hr元素放置在引导程序3列div之外。不确定使用引导程序3的正确方法

如何正确创建此布局？使用Bootstrap 3。

Answer 1

   <div class='col-lg-3 col-lg-offset-1'>
      <img src='StoreImage/Media/pv-logo.png' />
   </div>

上述div与您的<hr>重叠。

您可以将div的类从col-lg-3更改为col-lg-2，以使您的<hr>看起来更扩展。

如何用水平线画满

1 个答案: