html - 如何调整 Bootstrap 网格以与我在移动设备中的示例不同地显示

Question

我想知道使用 Bootstrap 3 完成以下响应式设计的最佳方法是什么。我只能让它看起来有点像我的目标，如下所示:

常规大小的监视器目标:

移动设备目标:

到目前为止，我已经尝试过:这是我为实现上述目标所能做的最好的事情。

HTML:

CSS:

300px 在我的屏幕上看起来不错，但我更喜欢响应式设计来控制页面收缩和增长，而不是这个数字。完美的方法是简单地使用 text-align:left 和 text-align:right，但问题是当响应式设计开始时，移动设备仍然将它们放在左侧和右侧而不是两者在左侧。我希望它们都在左侧堆叠在一起。我的代码在上面有效，但我很确定有更好的方法。感谢您的帮助。

Answer 1

首先也是最重要的 Bootstrap 有一个 offset 类的东西，而不是创建空间，或者 pads_to_right 你可以在网格系统中调用一个类。 offset 设置左侧元素的响应边距。您的代码应如下所示:

<div class="container">
    <div class="row"><!--rows help in the order of the div and positioning-->
        <div class="col-md-4">left text</div>
        <div class="col-md-4 col-md-offset-4">right text</div>
    </div>
</div>

网格系统有 md 代表中号，lg 代表大号，xs 代表超小号和 sm对于小。所有这些都是屏幕尺寸的断点，因此将您的代码设置为 md-4 列会将您的 div 设置为中等尺寸屏幕上的特定尺寸。所以如果你想为移动设备设置类似的东西，你还必须使用 col-xs-dimension(1-12)。屏幕尺寸后面的数字总和必须为 12 。阅读更多关于网格系统的信息 here .

<div class="container">
        <div class="row"><!--rows help in the order of the div and positioning-->
            <div class="col-md-4 col-xs-12">left text</div>
            <div class="col-md-4 col-md-offset-4 col-xs-12">right text</div>
        </div>
    </div>

所以在这里我将 xs 设置为 12 以便它占据整个空间并将下一个 div 推到下一行。