我想知道使用 Bootstrap 3 完成以下响应式设计的最佳方法是什么。我只能让它看起来有点像我的目标,如下所示:
常规大小的监视器目标:
移动设备目标:
到目前为止,我已经尝试过:这是我为实现上述目标所能做的最好的事情。
HTML:
CSS:
300px 在我的屏幕上看起来不错,但我更喜欢响应式设计来控制页面收缩和增长,而不是这个数字。完美的方法是简单地使用 text-align:left 和 text-align:right,但问题是当响应式设计开始时,移动设备仍然将它们放在左侧和右侧而不是两者在左侧。我希望它们都在左侧堆叠在一起。我的代码在上面有效,但我很确定有更好的方法。感谢您的帮助。
最佳答案
首先也是最重要的 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 推到下一行。
关于html - 如何调整 Bootstrap 网格以与我在移动设备中的示例不同地显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28311651/