Question

这是我的第一篇文章。我需要有人在我的网站上用页脚帮我解决这个问题。我用Bootstrap 3.3.7创建了这个，我的页脚是这样的：

＆＃13;

<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
  <div class="container">
    <div class="row row-title">
      <div class="col-md-4">
        <div class="navbar-text pull-left">
          <p>LEFT</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="navbar-text">
          <p>PROVA MESSAGGIO</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="navbar-text pull-right">
          <p>RIGHT</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

我需要使用类PROVA MESSAGGIO将navbar-text段放在页脚中间。怎么办呢？

Answer 1

试试这个：http://jsfiddle.net/x1hphsvb/886/

<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
  <div class="container">
    <div class="row row-title">
      <div class="col-md-4">
        <div class="navbar-text pull-left">
          <p>LEFT</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="navbar-text no-float"><!--This was floating. Hence it was not aligned-->
          <p class="text-center">PROVA MESSAGGIO</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="navbar-text pull-right">
          <p>RIGHT</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS：

.no-float {
  float: none;
}

说明：导航栏文本有float:left;，可将元素移出流程。对于中心对齐，您需要将元素放在流中以获取其父级的宽度。删除浮动然后使用文本中心可以解决问题

Answer 2

如果您无法修改HTML代码，则可以使用以下解决方案。对width:100%应用text-align:center和navbar-text。确保您仅定位navbar-text的第二部分，如下所示。

 .navbar-fixed-bottom div.col-md-4:nth-child(2) .navbar-text {
    width:100%;
    text-align:center;
 }

如果您可以修改代码，请在navbar-text旁边添加一个新类并应用上述样式。

 .new-class {
    width:100%;
    text-align:center; 
 }

.navbar-fixed-bottom div.col-md-4:nth-child(2) .navbar-text {
  width:100%;
  text-align:center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
  <div class="container">
    <div class="row row-title">
      <div class="col-md-4">
        <div class="navbar-text pull-left">
          <p>LEFT</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="navbar-text">
          <p>PROVA MESSAGGIO</p>
        </div>
      </div>
      <div class="col-md-4">
        <div class="navbar-text pull-right">
          <p>RIGHT</p>
        </div>
      </div>
    </div>
  </div>
</div>

FIDDLE DEMO

Answer 3

试试这个：

  <div class="navbar-text text-center">
    <p>PROVA MESSAGGIO</p>
  </div>

对齐页脚文本中心

3 个答案: