Question

我在BS页脚中有垂直中心的大问题。我的代码如下：

<footer class="footer navbar-fixed-bottom" style="background-color:lightgrey;">
<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <ul class="nav nav-pills nav-justified">
                <li><a href="#">SITE1</a></li>
                <li><a href="#">SITE2</a></li>
                </ul>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
                <div class="center-inner">
                <p class="text-muted inner">Some text.</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
                <p>More text.</p>
            </div>  
        </div>
    </div>
</div>

JSFiddle

不幸的是，第2和第3列中的文字不是垂直居中的。我尝试了类似主题的解决方案，但遗憾的是 - 粘性页脚没有好效果（在大多数情况下 - 它改变了页脚高度和布局 - 添加了显示：表格后）。

下面我上传的图片说明了它今天的样子，以及我希望它看起来如何： preview

家里有人可以帮我这个。

Answer 1

试试这个

您可以设置media-query值来设置断点。

检查工作已更新demo

HTML：

<footer class="footer navbar-fixed-bottom" style="background-color:lightgrey;">
  <div class="container">
    <div class="row row-eq-height">

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        <ul class="nav nav-pills nav-justified">
          <li><a href="#">SITE1</a></li>
          <li><a href="#">SITE2</a></li>
        </ul>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
        <div class="center-inner">
          <p class="text-muted inner">Some text.</p>
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
        <p>More text.</p>
      </div>


    </div>


  </div>
</footer>

CSS：

@media screen and (max-width: 767px) {
  .row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
  }
}


}
footer [class*="col-"] p {
  padding: 10px 15px;
  margin-bottom: 0;
}

Answer 2

请检查一下。

＆＃13;

footer .text-muted.inner, footer p{padding:10px 15px;margin:0;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<footer class="footer navbar-fixed-bottom" style="background-color:lightgrey;">
<div class="container">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                <ul class="nav nav-pills nav-justified">
                <li><a href="#">SITE1</a></li>
                <li><a href="#">SITE2</a></li>
                </ul>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
                <div class="center-inner">
                <p class="text-muted inner">Some text.</p>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 text-center">
                <p>More text.</p>
            </div>  
        </div>
    </div>
</div>
</footer>

＆＃13;

希望这会对你有所帮助。

感谢。

Answer 3

您可以使用：

<div class="row">
  <div class="span6">
    <textarea id="emojionearea1"></textarea>
  </div>
</div>
<button id="click">preview</button>
<div id="display">
</div>

$(document).ready(function() {
    $("#emojionearea1").emojioneArea({

        pickerPosition: "right",
        tonesStyle: "bullet",

    });
});

$("#click").click(function(){
text =  $("#emojionearea1").val();
//alert(text);
$("#display").html(text);
})

（只适用于父框）

https://jsfiddle.net/kaskull/z4wLpk9h/5/

Answer 4

这是因为您的链接周围有填充，因此您还应该在p标记中添加填充。

.footer [class*="col-"] p {
  padding: 10px 15px;
  margin: 0;
}

工作Demo

文本垂直居中于粘性BootStrap页脚

4 个答案: