Question

使用3个文本元素将引导程序固定到顶部标题的最可靠和最有效的方法是：两侧为2，中间为1。重要的是标题不得在手机或平板电脑上折叠或折叠。

问题：

中心文字元素不居中（类navbar-right / left / center don't work）
标题一直亮着调整大小时崩溃。

这是我目前的代码：

<nav class="navbar navbar-default navbar-fixed-top" style="margin-left: auto;
margin-right: auto;">
<div class="row-fluid">
    <div class='navbar-left'>
        <p class="navbar-text" id="left">Text text text
            <br>text text</p>
    </div>
    <div class='navbar-center'>
        <p class="navbar-text" id="center">Text text text
            <br>text text</p>
    </div>
    <div class='navbar-right' id="right">
        <p class="navbar-text">Text text text
            <br>text text</p>
    </div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
    <div class="buffer">
        <div class="container">
             <h1>Hello, world!</h1>

            <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a>
            </p>
        </div>
    </div>
</div>

Jsfiddle

Answer 1

Bootstrap文档说：
＆＃34;当视口比@ grid-float-breakpoint更窄时，导航栏会折叠到其垂直移动视图中;当视口的宽度至少为@ grid-float-breakpoint时，导航栏会扩展到其水平非移动视图。在Less source中调整此变量以控制导航栏折叠/展开的时间。默认值为768px（最小的＆＃34;小＆＃34;或＆＃34;平板电脑＆＃34;屏幕）。＆＃34;

将较小变量@grid-float-breakpoint覆盖为0px以消除可折叠性。

对于居中，您可能希望仅考虑在标头中使用自定义代码，因为您没有使用自举响应功能。

Answer 2

Bootstrap 3中没有navbar-center类，并且不再有row-fluid类（HTML中没有关闭DIV标记）。

您可以创建一个自定义类来使文本居中，并使用右拉和左拉类，因为它们不会受到折叠导航栏的影响：

http://codeply.com/go/R2JwHRpzXN

.navbar-center
{
    position: absolute;
    width: 100%;
    top: 0;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

Bootstrap - 固定到顶部导航栏，带有3个文本元素

2 个答案: