將徽標和文本放在同一行 - twitter bootstrap

使徽標和文本在所有分辨率和大小之間響應。當我重新調整瀏覽器的大小時，我遇到了文本崩潰的問題。我如何確保所有resolution和sizes的徽標和旁邊的文字都在same line之內。將徽標和文本放在同一行 - twitter bootstrap

<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>

下面是我正在處理的小提琴。我希望徽標和文本在所有分辨率和大小上保持一致。 http://jsbin.com/yuhibisu/4/edit

來源

2014-06-28 Shane

你只需要改變這種

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

要這樣：

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

您必須將樣式應用到「UL」，而不是「麗」

檢查它：

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

來源

2014-06-28 13:42:12 brunofitas

但是，當我重新調整瀏覽器大小失敗。 http://jsbin.com/fequjewi/1/edit – Shane

那麼，當沒有足夠的空間容納整個單詞時，它就會失敗......這很正常。也許你應該改變字體大小，當窗口的寬度變得很小 – brunofitas

如果你注意到垂直分隔線是我造成的問題，當我重新尺寸.... – Shane

將徽標和文本放在同一行 - twitter bootstrap

回答

相關問題