Question

看看汉堡/菜单图标如何下推到下一行？我希望文本转到下一行，将菜单按钮和标题文本保持在彼此旁边。标题文本和菜单分别左右浮动。

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

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

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

第二，make .navbar-toggle position：absolute，right：0;

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

你完成了！ :)。

以下是演示：http://jsfiddle.net/sARaY/

如何强制使用浮动元素进行文本换行

1 个答案: