Question

我希望页脚在大多数视图中显示更长的内容，但仅限于＆＃34;条款＆＃34;在XS视图中。它在完整视图中运行良好，但在XS视图中它会进入下一行。我做错了什么？

http://www.bootply.com/122402

HTML：

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

CSS：

#footerStatement, #termsLink {
    font-size: 10px;
    margin-top: 19px;
}

#termsLink {
    color: #fffff0;
    text-decoration: underline;
}

Answer 1

Bootply ：http://www.bootply.com/122425

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>

<强> CSS ：

.margin-left{
  margin-left:10px;
  }

#footerStatement, #termsLink {
    font-size: 10px;
    margin-top: 19px;
}

#termsLink {
    color: #fffff0;
    text-decoration: underline;
}

Answer 2

你可以通过改变两件事来把所有东西都放在同一条线上。

将float: left移动到不受@media (min-width: 768px)影响的新块中。
```
.navbar-text {
    float: left;
}
```

删除额外的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>

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

2 个答案: