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

Question

Here is an image of my problem.

See how the hamburger/menu icon is pushed down to the next line? I want the text to go to the next line instead, keeping the menu button and header text next to eachother. The title text and menu are floated left and right respectively.

This doesn't seem to be a clear problem (since I'm trying to do the opposite), and I can't think how the white space property could be used in this case.

The only thing that works is setting a max width on the title, but that messes up the layout at some screen sizes.

I have no custom css on these elements, just what comes with Bootstrap 3

Markup (basically lifted straight from the new Bootstrap 3 docs):

<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

Stephen,

Two changes are required to get your desired result.

First, set .navbar-brand padding right to 70px or what you needed.

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

And second, make .navbar-toggle position:absolute, right:0;

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

And you are done! :).

Here is demo: http://jsfiddle.net/sARaY/