将徽标和文本放在同一行 - twitter bootstrap

时间:2014-06-28 13:39:31

标签: html css css3 twitter-bootstrap-3

使徽标和文字在所有分辨率和大小上都有响应。当我重新调整浏览器大小时,我的文本会崩溃。如何确保所有same lineresolution sizes的徽标和文字位于<html> <head> <title>Header</title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script type="text/javascript" src="slider.js"></script> <style> .divider-vertical { height: 50px; margin-top: 0; margin-bottom: 0; margin-left: 20px; margin-right: 10px; border-left: 1px solid #a8a8a8; border-right: 1px solid #a8a8a8; } </style> </head> <body> <div class="container-fluid"> <nav class="navbar navbar-default"> <div class="col-sm-3"> <a class="navbar-brand" href="#">BimAssure</a> <ul class="nav navbar-nav"> <li class="divider-vertical"></li> <li><h4 style="margin-top: 15px">ACME - New York</h4></li> </ul> </div> </nav> </div> </body> </html>

{{1}}

以下是我正在努力的小提琴。我希望徽标和文本在所有分辨率和大小上都在同一条线上。 http://jsbin.com/yuhibisu/4/edit

1 个答案:

答案 0 :(得分:1)

您只需要更改此

<ul class="nav navbar-nav">
    <li class="divider-vertical"></li>

对此:

<ul class="nav navbar-nav divider-vertical">
    <li> ...

你必须将风格应用于&#34; ul&#34;而不是&#34; li&#34;

检查:

http://jsbin.com/yuhibisu/8/edit