Question

我正在尝试在我的网站上使用Bootstrap。在标题中我想用2列做一行：一行在左边，一行在右边，空间之间。所以我写了一个如下代码。左栏正是我想要的位置 - 在左下角..但右栏不想向右走，我不知道为什么。

<header class="head">
    <div class="row">
        <div class="col-xs-12 col-md-4">
            <p>Lorem ipsum</p>
        </div>
        <div class="col-xs-12 col-md-4 col-md-offset-4">
            <p>Lorem ipsum</p>
        </div>
    </div>
</header>

https://jsfiddle.net/zMcs5/60/。我做错了什么？

Answer 1

当您开始混合行和列时，Bootstrap会变得挑剔。根据我的经验，“拉右”课程通常需要在不同的地方才能正常工作。

您的部分问题是在同一行中放置了两个12格宽的div标签。由于Bootstrap网格限制为12个单位宽，你不能要求总共24个。为了保持整洁，甚至我调整了这些值，然后为你的<p> div添加了一个“右拉”类在第二栏。您可能只想在第二列中使用“pull-right”类放置内联或块div，以使其中的所有内容保持正确对齐。

这是一个更新的小提琴：https://jsfiddle.net/zMcs5/62/ 简而言之，这是一个重大变化：

 <div class="col-xs-6 col-md-5 col-md-offset-2">
        <p class="pull-right">Lorem ipsum</p>

我希望这会让你走上正确的道路！

Answer 2

您的右栏位于正确的位置，但由于默认情况下文字是左对齐的，因此它可能看起来处于错误的位置。要解决此问题，请使用text-left对两列进行居中对齐，或者左对齐左列（text-right或保留默认值）并右对齐右列（<header class="head"> <div class="row"> <div class="col-xs-12 col-md-4 text-center"> <p>Lorem ipsum</p> </div> <div class="col-xs-12 col-md-4 col-md-offset-4 text-center"> <p>Lorem ipsum</p> </div> </div> </header>）：

Option 1

<header class="head">
    <div class="row">
        <div class="col-xs-12 col-md-4">
            <p>Lorem ipsum</p>
        </div>
        <div class="col-xs-12 col-md-4 col-md-offset-4 text-right">
            <p>Lorem ipsum</p>
        </div>
    </div>
</header>

Option 2

{{1}}

为什么Bootstrap不适合我的整行？

2 个答案: