Css 当我只在XS上显示导航栏文本时，为什么它会移动到下一行？

我希望页脚在大多数视图中显示更长的内容，但在XS视图中仅显示“术语”。它在完整视图中工作得很好，但在XS视图中它会转到下一行。我做错了什么

HTML:

---

Bootply：

HTML：

<div class="navbar navbar-inverse navbar-fixed-bottom">
    <div class="navbar-header col-xs-6">
        <div class="container">
            <p id="footerText" class="navbar-text pull-left ">©2014 Website</p> 
        <div>
            <p class="navbar-text hidden-xs" id="footerStatement">By using this site you are agreeing to its <a href="/Terms.htm" id="termsLink">terms of use</a></p>
        </div>
        <div>
            <a class="navbar-text visible-xs margin-left pull-left" href="/Terms.htm" id="termsLink">Terms</a>
        </div>
        </div>
    </div>
    <div class="navbar-header pull-right" id="navbarHeaderContact">
        <button type="button" class="btn btn-default navbar-btn" data-toggle="modal" data-target="#contact" id="contactButton">
                Contact
        </button>
    </div>
</div>

---

Bootply：

HTML：

<div class="navbar navbar-inverse navbar-fixed-bottom">
    <div class="navbar-header col-xs-6">
        <div class="container">
            <p id="footerText" class="navbar-text pull-left ">©2014 Website</p> 
        <div>
            <p class="navbar-text hidden-xs" id="footerStatement">By using this site you are agreeing to its <a href="/Terms.htm" id="termsLink">terms of use</a></p>
        </div>
        <div>
            <a class="navbar-text visible-xs margin-left pull-left" href="/Terms.htm" id="termsLink">Terms</a>
        </div>
        </div>
    </div>
    <div class="navbar-header pull-right" id="navbarHeaderContact">
        <button type="button" class="btn btn-default navbar-btn" data-toggle="modal" data-target="#contact" id="contactButton">
                Contact
        </button>
    </div>
</div>

---

通过改变两件事，你可以把所有事情都放在同一条线上

将

float:left

移动到不受

@介质影响的新块中（最小宽度：768px）

拆下多余的div

<div class="container">
    <p id="footerText" class="navbar-text">©2014 Website</p>    
    <p class="navbar-text hidden-xs" id="footerStatement">By using this site you are agreeing to its 
        <a href="/Terms.htm" id="termsLink">terms of use</a>
    </p>
    <a class="navbar-text visible-xs" href="/Terms.htm" id="termsLink">Terms</a>
</div>

©2014网站

---

通过改变两件事，你可以把所有事情都放在同一条线上

将

float:left

移动到不受

@介质影响的新块中（最小宽度：768px）

拆下多余的div

<div class="container">
    <p id="footerText" class="navbar-text">©2014 Website</p>    
    <p class="navbar-text hidden-xs" id="footerStatement">By using this site you are agreeing to its 
        <a href="/Terms.htm" id="termsLink">terms of use</a>
    </p>
    <a class="navbar-text visible-xs" href="/Terms.htm" id="termsLink">Terms</a>
</div>

©2014网站

---

谢谢这很有效。然而，当我放大浏览器字体大小的时候，有一个油炸孔在中间的范围内，页脚回到两行。换句话说，最大和最小的字体有一行页脚，而某些中等字体有两行。你知道这是什么原因吗？是的，我注意到了，但这是一个独立的问题。您正在使用一个div，该div的类

容器
位于另一个元素中。这个div对除xs之外的所有内容都有显式的宽度，因此它将右边的按钮推到新行上。该行中需要的所有内容都应该在
容器中
div中。一旦我将所有内容都放在同一个div中，我就无法使联系人按钮向右拉。我认为总体上的问题是太多的规则使事情变得复杂。使用中的示例并确保您按照预期的方式使用它们。例如，这里有
.navbar
->
.container
->
.navbar header
->按钮/链接/文本。您有一个更深层的层次结构，它以
.navbar
->
.navbar标题
->
.container
开头。谢谢。这很有效。然而，当我放大浏览器字体大小的时候，有一个油炸孔在中间的范围内，页脚回到两行。换句话说，最大和最小的字体有一行页脚，而某些中等字体有两行。你知道这是什么原因吗？是的，我注意到了，但这是一个独立的问题。您正在使用一个div，该div的类
容器
位于另一个元素中。这个div对除xs之外的所有内容都有显式的宽度，因此它将右边的按钮推到新行上。该行中需要的所有内容都应该在
容器中
div中。一旦我将所有内容都放在同一个div中，我就无法使联系人按钮向右拉。我认为总体上的问题是太多的规则使事情变得复杂。使用中的示例并确保您按照预期的方式使用它们。例如，这里有
.navbar
->
.container
->
.navbar header
->按钮/链接/文本。您有一个更深层的层次结构，它以
.navbar
->
.navbar标题
->
.container
开始。
.navbar-text {
    float: left;
}

<div class="container">
    <p id="footerText" class="navbar-text">©2014 Website</p>    
    <p class="navbar-text hidden-xs" id="footerStatement">By using this site you are agreeing to its 
        <a href="/Terms.htm" id="termsLink">terms of use</a>
    </p>
    <a class="navbar-text visible-xs" href="/Terms.htm" id="termsLink">Terms</a>
</div>