我有3列包含文字(紫色)。每列包含标题(蓝色),内容(绿色)和链接(黄色)。但是,取决于列,文本或多或少更长。

桌面检视

javascript - Bootstrap:列之间的水平文本对齐-LMLPHP

但是,我想对我的内容的每个部分进行某种水平对齐,即每个标题都在同一条水平“线”上开始,每条内容都在同一条水平“线”上,等等。
与此并行,我不希望在移动视图中使用该文本,我希望文本没有多余的垂直空格(因为在智能手机上水平对齐没有意义)。

流动检视

javascript - Bootstrap:列之间的水平文本对齐-LMLPHP

我找不到如何使用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>

最佳答案

如果您愿意使用一些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个元素ab放入2个不同的容器中时,a的高度不会影响b的高度,因此下面的元素不会对齐,您的最好的镜头是使用弹性盒,像这样:



.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来实现所需的功能。

关于javascript - Bootstrap:列之间的水平文本对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31895653/

10-12 12:54
查看更多