Html Bootstrap 页脚中的文本与中心对齐

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20481944/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 22:25:16  来源:igfitidea点击:

Text in Bootstrap footer aligning to center

htmlcsstwitter-bootstrapfullcalendar

提问by Prajeeth Emanuel

The footer in my webpage is aligned to the center.

我网页中的页脚与中心对齐。

<div id="footer">
  <div class="container">
    <p class="text-muted credit" style="color:#fff">xyz</p>
  </div>
</div>

This code works perfectly for other pages but for this particular page it doesn't work. This page contains a fullcalender UI that I have plugged but I doubt that has anything to do with my issue.

此代码适用于其他页面,但对于此特定页面不起作用。此页面包含我已插入的 fullcalender UI,但我怀疑这与我的问题有关。

回答by AJ Meyghani

Try adding the "text-center" class to the container. So you will end up with this:

尝试将“text-center”类添加到容器中。所以你最终会得到这个:

<div id="footer">
  <div class="container text-center">
    <p class="text-muted credit" style="color:#fff">xyz</p>
  </div>
</div>

See if that works. Otherwise, maybe paste your markup for the page so that we can look at it. It would also be helpful if you inspected the footer element with chrome for example and attached the screenshot of it.

看看这是否有效。否则,也许可以粘贴页面的标记,以便我们查看。例如,如果您使用 chrome 检查页脚元素并附上它的屏幕截图,这也会很有帮助。

回答by jr from Yaoundé

For me with Bootstrap 3 don't forget to specified col-md-12 col-sm-12 and col-xs-12 to work.

对于使用 Bootstrap 3 的我来说,不要忘记指定 col-md-12 col-sm-12 和 col-xs-12 来工作。

Other things avoid using style="color:#fff"it breaks color theme. Use navbar-textinstead. So you should have something like this :

其他事情避免使用style="color:#fff"它打破颜色主题。使用navbar-text来代替。所以你应该有这样的东西:

<nav class="navbar navbar-default  navbar-fixed-bottom" role="navigation">
    <div class="container text-center">
        <p class="navbar-text col-md-12 col-sm-12 col-xs-12">&copy; xyz</p>
    </div>
</nav>

Last word, use containerand not container-fluid

最后一句话,使用container而不是container-fluid