html - 如何用水平线画满

Question

我尝试创建 bootstrap 3 网站，其 Logo 在左栏中，行在右栏中。

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

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

<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 元素位于 bootstrap 3 列 div 之外。不确定这是使用 bootstrap 3 的正确方法

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

Answer 1

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

上面提到的 div 与您的 <hr> 重叠.

您可以从 col-lg-3 更改 div 的类至 col-lg-2让你的<hr>看起来更延伸。