文本居中和右对齐在Bootstrap中无法正常工作

Question

我希望页面上的某些元素能够居中和靠右对齐，但是Bootstrap类"text-right"和"text-center"似乎无效，尽管"text-left"可以。

谢谢。

<div class="container-fluid">
    <div class="row text-center" id="header">
        <div class="col-xs-12">
            <div class="container" style="padding-left:30px; padding-right:30px;">
                <div class="col-xs-2 text-left" id="mainLogo">
                    <a href="/"><img src="/stylesheet/main_logo.png" ></a>
                </div>

                <div class="col-xs-6 text-right">
                    <ul class="nav nav-pills">
                        <li role="presentation" class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
                                <span class="glyphicon glyphicon-user"></span> Account <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li id="ctl00">
                                    <a href="/account/">Your Account</a>
                                </li>
                                <li id="user">
                                    <a href="/profile/">Profile</a>
                                </li>
                                <li id="panel">
                                    <a href="/shop/reviewbasket/">Basket</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>

                <div class="col-xs-4 text-right">
                    <div id="search">
                 </div>     
                </div>
                </div>
            </div>
        </div>
    </div>

- user2953989

---

你应该能够使用浏览器的开发者控制台（“检查器”）来查看应用的样式规则以及出现问题的地方。 text-right 和 text-center 可以正常工作，但在这种高级别的情况下可能不起作用。 你可能需要将其放在导航 ul 中每个 a 上。 - random_user_name

我认为它正在工作，请参考这个 Fiddle https://jsfiddle.net/f0wL18zy/，hello 在中心。 - Girdhari Agrawal

对于使用Bootstrap 5的未来读者，请参见：https://dev59.com/4mMl5IYBdhLWcg3wHj1O#18672475 - Carol Skelly

Answer 1

如果您使用的是Bootstrap 5，请注意 text-left 和 text-right 类已被删除，现在您可以使用 text-start 和 text-end。

- Crasher

---

我现在遇到的问题是text-start给了我右对齐，而text-end给了我左对齐。 - Literate Corvette

@LiterateCorvette请就此提出一个新问题并创建一个测试用例。 - Crasher

你能提供文档链接吗？我尝试查找，但仍然出现了文本左对齐和右对齐。 - AbbathCL

这在Bootstrap 5上非常好用！ - Vikingslord

Answer 2

Bootstrap 5 - Update 2022

如此处所述，在Bootstrap 5中left和right已被替换为start和end...

• 对于块级元素（例如div），请使用float-end
• 对于内联元素（例如a，span），请使用text-end

Bootstrap 4 - Update 2018

pull-right已更改为float-right

Bootstrap 3 - Original Answer

最初的问题是针对Bootstrap 3的，问题是OP试图在块级元素上使用text-right。 text-right仅适用于内联元素。UL是块级元素，因此应像这样使用pull-right。

<div class="col-xs-6">
     <ul class="nav nav-pills pull-right"> 
         ...

- Zim