Question

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

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

向右或向左浮动元素

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

或

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

类。但是，如果我想将元素对齐到右下角，我还需要做什么？在bootstrap标记之后执行此操作的最常用方法是什么？

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

但是如果想要在容器的底部修改你的内容，你应该将容器的位置设置为“relative”，将内容的位置设置为“absolute”，然后将“bottom：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>

Answer 2

你的意思是你的专栏内部只使用align :(指示），但内部容器假设

Specification

使用浮动使用拉右和拉左

Answer 3

你可以简单地使用

＆＃13;

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

＆＃13;

有关详细信息，请参阅

<强> Refer

Answer 4

你可以分享你的代码，我可以看到你需要实现的目标。因为对于底部对齐，您可以使用不同的技术，如位置，

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

4 个答案: