使用 Bootstrap Grid 对齐内容的正确方法是什么？答案

【问题标题】：What is a proper way to align content using Bootstrap Grid?使用 Bootstrap Grid 对齐内容的正确方法是什么？
【发布时间】：2015-10-12 16:42:58
【问题描述】：

所以有一个问题让我担心了很长一段时间。听起来像是“在 Bootstrap 列中对齐内容的正确方法是什么？”

当我使用 Bootstrap Grid 时，我通常将屏幕宽度划分为 col-md-* 块，这些块形成列并且在调整窗口大小时不会导致冲突。但我不确定如何对齐这些块内的内容。

主要的bootstrap documentation page 只提到了如何使用浮动元素向右或向左浮动

<div class="pull-left">..</div>

或

<div class="pull-right">...</div>

类。但是，如果我想将元素与右下角对齐，我需要做什么？在引导标记之后最常用的方法是什么？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

在 col-md-* div 中，您可以创建一个包含其他 col-md-* div 的新行，也可以只使用一些帮助类：

<div class="col-md-*">
    <div class="pull-right">content</div> <!--This will set a float:right on the div-->
</div>

或者

<div class="col-md-*">
    <div class="text-right">content</div> <!--The div will not float, but it will align your content to the right-->
</div>

但如果要将内容固定在容器的底部，则应将容器的位置设置为“相对”，将内容的位置设置为“绝对”，然后设置“底部：0”

这应该可行：

<div class="row">
    <div class="col-md-6" style="height:150px">
        <div class="text-right" style="position:absolute;bottom:0;left:0;right:0;">
            content
        </div>
    </div>
</div>

【讨论】：

你可以观察到它的坏处here。事实证明，您每次都应该为此手动指定特定高度。
指定高度仅用于示例，但即使没有高度属性也可以使用。 col-md-* div 没有定义的高度
我不明白你的意思，请查看我的 Jsfiddle 以确保它不是那样工作的。
col-md-* div 默认是相对的，所以这里不需要内联样式。在您的小提琴中，容器没有高度，因此如果您将内容与底部对齐，您不会注意到任何差异:) 所以您可以这样做：jsfiddle.net/thcmvf9o/11
我知道了。谢谢你，克莱门特！

【解决方案2】：

你的意思是在你的专栏里面只使用 align:(directions)，但假设使用内部容器

<div class="col-md-6"><div class="text-align:right">some text</div></div>

使用浮动使用拉右和拉左

【讨论】：

好的，但是如果我想把它对齐到底部呢？
@riazshah 我认为它应该是 style 而不是 class。 class="text-align:right"

【解决方案3】：

你可以简单地使用

&lt;div class="col-md-6" style="border:1px solid grey;"&gt;&lt;div class="text-right"&gt;some text&lt;/div&gt;&lt;/div&gt;

更多细节可以参考

Refer

【讨论】：

没有解决将内容与右下角对齐的主要问题。