如何強制文本換行與浮動元素

Here is an image of my problem.如何強制文本換行與浮動元素

見漢堡/菜單圖標如何下推到下一行？我希望文本轉到下一行，保持菜單按鈕和標題文本緊挨着彼此。標題文本和菜單分別左右浮動。

這似乎不是一個明確的問題（因爲我試圖做相反的事情），我不能想到在這種情況下如何使用空白屬性。

唯一可行的是在標題上設置最大寬度，但是會在某些屏幕尺寸上混淆佈局。

我對這些元素沒有自定義CSS，正是帶有引導3

標記（基本上從新引導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>

來源

2013-09-20 Stephen Panzer

斯蒂芬，

需要兩個更改才能得到您想要的結果。

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

來源

2013-09-21 00:10:14

如何強制文本換行與浮動元素

回答

相關問題