Question

Re：Wordpress中的Bootstrap 3.3.5

我以前没见过这个问题。我想做的就是将3 x .col-md-4 .well对齐在一行内，但它们不会对齐。第一个div总是高一点;看截图。

这是代码：

&nbsp; 

<div class="row">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
       <a class="page-scroll" href="#how-to"><div class="home-plans well">
            <br/>
            <h2>1.</h2>
            <p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.p>
        </div> <!-- /well --></a>
    </div> <!-- /col-md-4 -->

    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
        <div class="home-plans well">
            <br />
            <h2>2.</h2>
             <p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.p>
        </div> <!-- /well -->
    </div> <!-- /col-md-4 -->

    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
        <div class="home-plans well">
            <br />
            <h2>3.</h2>
            <p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.</p>
        </div> <!-- /well -->
    </div> <!-- /col-md-4 -->
</div>

在资源管理器中使用f12工具，问题似乎是下面的CSS代码样式行：

/*media all*/
.btn-group-vertical > .btn-group::after, .btn-group-vertical > .btn-group::before, .btn-toolbar::after, .btn-toolbar::before, .clearfix::after, .clearfix::before, .container-fluid::after, .container-fluid::before, .container::after, .container::before, .dl-horizontal dd::after, .dl-horizontal dd::before, .form-horizontal .form-group::after, .form-horizontal .form-group::before, .modal-footer::after, .modal-footer::before, .nav::after, .nav::before, .navbar-collapse::after, .navbar-collapse::before, .navbar-header::after, .navbar-header::before, .navbar::after, .navbar::before, .pager::after, .pager::before, .panel-body::after, .panel-body::before, .row::after, .row::before {
    display: table;
    content: " ";
}

此页面位于Wordpress中。我在普通的HTML页面中尝试了相同的代码，并且.well .col-md-4s对齐OK。

要使cols对齐，我可以删除该行，但我想使用行。

这已经杀了我近一天了。我做了很多研究，尝试使用clearfix和clear：两者都没有喜悦。有人可以对此有所了解吗？

编辑：我还注意到页脚部分中的两行导致页脚有滚动条？所以，我不得不删除这些行。由于某种原因，似乎我不能再使用Bootstrap在Wordpress中使用行了。

Answer 1

嗯，如果没有看到更多的CSS，但你尝试重新格式化你的第一个div，真的很棘手：

<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-4 col-md-offset-0 col-lg-4 col-lg-offset-0 text-center">
   <div class="home-plans well">
     <a class="page-scroll" href="#how-to">
        <br/>
        <h2>1.</h2>
        <p class="lead text-left">Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.p>
      </a>
    </div> <!-- /well -->
</div> <!-- /col-md-4 -->

然后按如下方式设置内部锚元素的样式：

<强> CSS：

.well > a {
    display: block;
}

我猜这与围绕.well div的锚元素有关吗？

水平对齐Bootstrap 3.3.5 Wordpress中一行内的列

1 个答案: