0

这是我的问题的图像。

看看汉堡包/菜单图标是如何下推到下一行的？我希望文本转到下一行，使菜单按钮和标题文本彼此相邻。标题文本和菜单分别向左和向右浮动。

这似乎不是一个明显的问题（因为我试图做相反的事情），而且我想不出在这种情况下如何使用空白属性。

唯一可行的方法是在标题上设置最大宽度，但这会在某些屏幕尺寸下弄乱布局。

我对这些元素没有自定义 css，只是 Bootstrap 3 附带的

标记（基本上直接来自新的 Bootstrap 3 文档）：

<div class="navbar navbar-default">
    <div class = "navbar-header">
      <a class = "navbar-brand" href="<%= request.protocol + request.host_with_port%>/weather"> Weather </a>

  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

  </div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
  <form id="search" class="navbar-form navbar-right form-inline" method="get" action="/weather">
    <div class="form-group">
      <input type="text" placeholder="Search for your city or zip" class="form-control" id = "searchbox" name="search">
    </div>
    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"/></button>
  </form>
</div>

`

4

1 回答 1

0

斯蒂芬，

需要进行两项更改才能获得所需的结果。

首先，将 .navbar-brand padding 设置为 70px 或您需要的值。

.navbar-brand {
    padding-right:70px; 
}

其次，使 .navbar-toggle position:absolute, right:0;

.navbar-toggle {
    position:absolute;
    right:0;
    top:0;
}

你完成了！:)。

这是演示：http: //jsfiddle.net/sARaY/

于 2013-09-21T00:10:14.187 回答