html - 如何用 float 元素强制文本换行

Question

Here is an image of my problem.

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

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

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

我没有关于这些元素的自定义 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>

`

Answer 1

斯蒂芬，

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

首先，将 .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/