Html 在同一行中有徽标和文本-twitter引导_Html_Css_Twitter Bootstrap 3

Html 在同一行中有徽标和文本-twitter引导

html css twitter-bootstrap-3

Html 在同一行中有徽标和文本-twitter引导,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,使徽标和文字在所有分辨率和大小上都具有响应性。我遇到了一个问题，当我重新调整浏览器的大小时，我的文本会被折叠。如何确保所有分辨率和尺寸的徽标和旁边的文本都在同一行 <html> <head> <title>Header</title> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

使徽标和文字在所有分辨率和大小上都具有响应性。我遇到了一个问题，当我重新调整浏览器的大小时，我的文本会被折叠。如何确保所有

分辨率

和

尺寸

的徽标和旁边的文本都在

同一行

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


标题
.垂直分隔器{
高度：50px；
边际上限：0；
页边距底部：0；
左边距：20px；
右边距：10px；
左边框：1px实心#A8A8；
右边框：1px实心#A8A8；
}


ACME-纽约

下面是我正在制作的小提琴。我希望标志和文字在所有分辨率和尺寸上都保持一致。

您只需更改此选项

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

为此：

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


。。。

您必须将样式应用于“ul”而不是“li”

检查它：

嗯，如果没有足够的空间放完整的单词，它就会失败……这很正常。当窗口宽度变小时，如果您注意到垂直分隔线在我重新调整大小时导致问题，也许您应该更改字体大小…navbar品牌{margin left:20px；}，maybeThanks，您能帮我更改sm和xs设备上的字体大小吗。我试过了，但没用。。。。谢谢你对字体大小的提示。你用错了@media。还有，你在给尸体打电话。最好调用“.navbar ul li h4”来指定navbar字母。。在这里检查