javascript - Bootstrap : Horizontal text alignement between columns

Question

我有 3 列包含文本(紫色)。每列包含标题(蓝色)、内容(绿色)和链接(黄色)。但是，根据列的不同，文本或多或少会更长。

桌面 View

但是，我希望内容的每个部分都进行某种水平对齐，即每个标题都在同一水平“行”上开始，每个内容都在同一水平“行”上等等......同时，我不希望在移动 View 上出现这种情况，我希望文本没有额外的垂直空间(因为水平对齐在智能手机上没有意义)。

移动 View

我找不到如何使用 Boostrap 3 解决这个问题。一方面，我可以同步列(简单)，但我不知道如何同步水平内容。

代码 [JSFiddle example ]

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-4">
            <div class="text-center">
                <h2>Title</h2>
            </div>
            <div class="text-justify">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non 
                </p>    

                <p>
                    <ul class="list-inline center-block text-center">
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                    </ul>
                </p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <div class="text-center">
                <h2>Title</h2>
            </div>
            <div class="text-justify">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non                 </p>    

                <p>
                    <ul class="list-inline center-block text-center">
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                    </ul>
                </p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <div class="text-center">
                <h2>Very long long long long long long long Title</h2>
            </div>
            <div class="text-justify">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non                 </p>    

                <p>
                    <ul class="list-inline center-block text-center">
                        <li>A</li>
                        <li>B</li>
                        <li>C</li>
                    </ul>
                </p>
            </div>
        </div>
    </div>
</div>

Answer 1

如果你愿意使用一些js，你可以这样做，就像这样:

这里有一个 JSFiddle 示例:http://jsfiddle.net/Yandy_Viera/wk9esdgq/

function setHeight(objSize){
    var $window = $(window);
    var header = $('.header');
    var content = $('.wrapper-content');

    if($window.width() < 768){  /*to avoid extra vertical spaces on mobile view*/
        header.css('height', 'auto');
        content.css('height', 'auto');

        return;
    }

    if($window.width() > objSize.windowCurrentWidth){  /*resetting the max height when the window is expanding to allow the heigth decrease*/
        objSize.headerMaxHeight = 0;
        objSize.contentMaxHeight = 0;
    }

    header.each(function (index)
    {
        header.css('height', 'auto');  /*setting to auto to allow the elemelent's height change*/ 
        if($(this).outerHeight() > objSize.headerMaxHeight){ /*setting "headerMaxHeight" equal to max height of header elements*/
            objSize.headerMaxHeight = $(this).outerHeight();
        }
    });

    content.each(function (index)
    {
        content.css('height', 'auto');
        if($(this).outerHeight() > objSize.contentMaxHeight){
            objSize.contentMaxHeight = $(this).outerHeight();
        }
    });

    header.css('height', objSize.headerMaxHeight);  /*applying the resulting max height to the element*/
    content.css('height', objSize.contentMaxHeight);

    objSize.windowCurrentWidth = $(window).width(); /*updating the current width of the window*/
}

$(document).ready(function() {
    var objSize = {
        headerMaxHeight : 0,
        contentMaxHeight : 0,
        windowCurrentWidth : $(window).width()
    }

    setHeight(objSize);

    $(window).resize(function(){
        setHeight(objSize);
    })
})

.wrapper-content, .header, .link{
  margin-bottom: 10px;
}
.header p{
  background: deepskyblue;
}
.content{
  background: green;
}
#content-1{
  height: 150px;
}
#content-2{
  height: 250px;
}
#content-3{
  height: 100px;
}
.link{
  height: 150px;
  background: yellow;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
        <div class="col-xs-12 col-sm-4 blue">
            <div class="header">
                <p>fajdklfa kajsdf lakjdfadlsfk jalfdsj lasf asd asdf as</p>
            </div>
            <div class="wrapper-content">
                <div id="content-1" class="content"></div>
            </div>
            <div class="link"></div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <div class="header">
                <p>fajdklfa kajsdf lakjdfadlsfk jalfdsj lasf asdadlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf asdf as</p>
            </div>
            <div class="wrapper-content">
                <div id="content-2" class="content"></div>
            </div>
            <div class="link"></div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <div class="header">
                <p>fajdklfa kajsdf lakjdfadlsfk jalfdsj lasf asdadlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf asdf as</p>
            </div>
            <div class="wrapper-content">
                <div id="content-3" class="content"></div>
            </div>
            <div class="link"></div>
        </div>
    </div>

如果你只想使用纯CSS恐怕你做不到(当然更不用说你可以为元素设置固定高度)，至少不能同时使用两者(对齐和响应式)时间 。因为html中的方式是有效的，当你有2个元素a，b到2个不同的容器中时，a的高度不会影响a的高度b，因此它们下面的元素不会对齐，最好的办法是使用像这样的 flexbox :

.col-sm-4{
  display: flex;
  flex-direction: column;
}
.wrapper{
  min-height: 415px;
  display: flex;
  flex-direction: column;
}
.content-wrap, p{
  flex-grow: 1;
}
p{
  margin-bottom: 30px;
  background: deepskyblue;
}
.content{
  background: green;
}
#content-1{
  height: 150px;
}
#content-2{
  height: 250px;
}
#content-3{
  height: 100px;
}
.link{
  height: 150px;
  background: yellow;
}

@media (min-width: 768px) {
  .row{
    display: flex;
    margin: 0;
  }
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
        <div class="col-xs-12 col-sm-4">
            <p>fajdklfa kajsdf lakjdfadlsfk jalfdsj lasf asd asdf as</p>
            <div class="wrapper">
                <div class="content-wrap">
                    <div id="content-1" class="content"></div>
                </div>
                <div class="link"></div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>fajdklfa kajsdf lakjdfadlsfk jalfdsj lasf asdadlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf asdf as</p>
            <div class="wrapper">
                <div class="content-wrap">
                    <div id="content-2" class="content"></div>
                </div>
                <div class="link"></div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>fajdklfa kajsdf lakjdfadlsfk jalfdsj lasf asdadlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf adlsfk jalfdsj lasf asd asdf asdf as</p>
            <div class="wrapper">
                <div class="content-wrap">
                    <div id="content-3" class="content"></div>
                </div>
                <div class="link"></div>
            </div>
        </div>
    </div>

但是无论如何，您必须为 .wrapper、.link 等多个元素设置固定高度，如果您知道高度，那么您很幸运，但请记住内容的高度可能会根据分辨率而变化。

无论如何我真的推荐你使用js来实现你想要的。