Bootstrap：列

时间：2015-08-08 15:38:35

标签： javascript jquery html css twitter-bootstrap

我有3列包含文字（紫色）。每列包含标题（蓝色），内容（绿色）和链接（黄色）。但是，根据列，文本或多或少更长。

桌面视图

Desktop view

但是，我希望我的内容的每个部分都有一种水平对齐，即每个标题都在相同的水平“线”上开始，每个内容都在同一水平“线”上等等...... 同时，我不希望在移动视图上，我想要没有额外垂直空间的文本（因为水平对齐在智能手机上没有意义）。

移动视图

Mobile 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>

2 个答案:

答案 0 :(得分：0)

正如凯文建议的那样，我建议使用表格来实现目标。您可以在https://bugs.busybox.net/show_bug.cgi?id=8261找到有关它们的更多信息。您可以通过添加一个响应于启动表的div的表类来使它们完全响应。例如：

<table class="table table-striped table-responsive">
  <thead>
    <tr>
       <th>Purple</th>
       <th>Blue</th>
       <th>Green</th>
    </tr>
  </thead>
  <tbody>
     <tr>
        <p></p>
        <p></p>
        <p></p>
     </tr>
     <tr>
        <p></p>
        <p></p>
        <p></p>
     </tr>
  </tbody>
</table>

希望这有帮助。

答案 1 :(得分：0)

如果你愿意使用某些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的高度不会影响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来达到你想要的效果。

相关问题
最新问题