Bootstrap max-width columns响应 [英] Bootstrap max-width columns responsive

问题描述

我试图编写一个单页响应式Bootstrap设计的一部分，它有两个并排的文本列。设计者希望这两列具有最大宽度，但是一旦达到其最大值，则它不再居中（因为其余内容仍然响应）。

I am trying to code a section of a one-page responsive Bootstrap design that has two side-by-side columns of text. The designer wants these two columns to have a max-width, but once it reaches its max, it is no longer centered (as the rest of the content continues to be responsive).

有没有办法仍然有两列文本集中？

Is there a way around this to still have the two columns of text centered?

指向代码的链接： http://www.bootply.com/119539

推荐答案

这里尝试 Bootply 。这是您要找的吗？

Here try this Bootply. Is this what you are looking for?

<div class="row">
    <div class="col-lg-12">
            <h2 class="center-block">How We Work</h2>

    </div>
    <div class="col-lg-4 col-lg-offset-2">
        <p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis nulla nec lacus condimentum molestie.</p>
    </div>
    <div class="col-lg-4">
        <p class="text-justify center-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
    </div>
</div>

---

---

h2.center-block{
    text-align:center;
}

p.text-justify{
 max-width:400px;
}

注意：您可以使用 col-lg-offset-2 将div移动2列。

NOTE: You can use col-lg-offset-2 to shift the div by 2 columns.

这篇关于Bootstrap max-width columns响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！