代码之家 › 专栏 › 技术社区 › Andrus

如何用横线画满

twitter-bootstrap-3 twitter-bootstrap css html

Andrus · 技术社区 · 6 年前

我试图创建一个引导3站点,在左列有徽标,在右列有行。

如图所示,行右应以全宽水平线分隔。

我尝试使用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列分区之外。不确定这是使用bootstrap3的正确方法吗?

如何正确创建此布局? 使用引导程序3。

1 回复 | 直到 6 年前

Salvatore 6 年前

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

上面提到的分区与 <hr> .

您可以将DIV的类从 col-lg-3 到 col-lg-2 使你 <人力资源部; 看得更远。

推荐文章

Glyn · 如何使用jQuery更改动态创建的按钮<span>中的文本?

2 年前

Salman Abbas · 如何在导航栏切换中更改下拉菜单中链接的颜色

2 年前

Pavel · 当验证DIV可见时,引导网格会移动

6 年前

Knownow · 通过导航显示背景

6 年前

Mona Coder · 删除Bootstrap 3上下拉菜单和下拉菜单之间的边框

6 年前

user9727963 · 引导和Internet Explorer 11问题

6 年前

Queen of the North · 无法更改输入表单宽度

6 年前

jaggs · 如何将java中创建的href链接传递到jsp页面

6 年前

Abu Ayyub · 引导中具有一个边框的多个输入元素

6 年前

espresso_coffee · 所选内容在我的引导/JQuery应用程序中不起作用?

6 年前