Question

我希望这样做，以便当屏幕在宽度方向上变小时，而不是垂直堆叠的行中的列，它们缩小以适应屏幕。

目前我有这个：

<div class="row">
<div class="col-lg-6 col-lg-offset-3">
    <div class="col-lg-4 headerBlock">
        <i class="headericon blackicon img-responsive fa fa-code"></i>
        <br/>
        <kbd class="headingkbd">Heading 1</kbd>
    </div>
    <div class="col-lg-4 headerBlock">
        <i class="headericon blackicon img-responsive fa fa-laptop"></i>
        <br />
        <kbd class="headingkbd">Heading 2</kbd>
    </div>
    <div class="col-lg-4 headerBlock">
        <i class="headericon blackicon img-responsive fa fa-coffee"></i>
        <br />
        <kbd class="headingkbd">Heading 3</kbd>
    </div>
</div>

当屏幕尺寸达到最小尺寸时，如何停止自动堆叠，而是缩小它们以适应屏幕？

Answer 1

根据屏幕大小和bootstrap提供的mediaquerys，您可以更具体地使用类。

像this：

<div class="row">
    <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2 col-lg-6 col-lg-offset-3">
        <div class="col-xs-4 headerBlock">
            <i class="headericon blackicon img-responsive fa fa-code"></i>
            <br/>
            <kbd class="headingkbd">Heading 1</kbd>
        </div>
        <div class="col-xs-4 headerBlock">
            <i class="headericon blackicon img-responsive fa fa-laptop"></i>
            <br />
            <kbd class="headingkbd">Heading 2</kbd>
        </div>
        <div class="col-xs-4 headerBlock">
            <i class="headericon blackicon img-responsive fa fa-coffee"></i>
            <br />
            <kbd class="headingkbd">Heading 3</kbd>
        </div>
    </div>
</div>

Answer 2

您可以指定每个元素的宽度，也可以指定所有元素的宽度。

文档说明，您必须将row包裹在container中，然后直接在div.row内开始定义您的div。 <div class="col-lg-6 col-lg-offset-3">这是没有必要的，除非是有意的吗？

所以使用这些：

col-lg 适用于大屏幕（lg）

col-md 适用于中画面（md）

col-sm 适用于小型/中型屏幕，因此（sm）

col-xs 用于超小屏幕，因此（xs）

我们可以定义我们的布局。

现在，在您的情况下，您希望所有三个元素始终位于中间位置，您可以通过为所有这些元素指定col-xs-4。

.headerBlock{
  text-align: center;/* to center the inline elements */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
	<div class="row">
	    <div class="col-xs-4 headerBlock">
	        <i class="headericon blackicon img-responsive fa fa-code"></i>
	        <br/>
	        <kbd class="headingkbd">Heading 1</kbd>
	    </div>

	    <div class="col-xs-4 headerBlock">
	        <i class="headericon blackicon img-responsive fa fa-laptop"></i>
	        <br />
	        <kbd class="headingkbd">Heading 2</kbd>
	    </div>

	    <div class="col-xs-4 headerBlock">
	        <i class="headericon blackicon img-responsive fa fa-coffee"></i>
	        <br />
	        <kbd class="headingkbd">Heading 3</kbd>
	    </div>
	</div>
</div>

或class="col-xs-4 col-sm-4 col-md-4 col-lg-4"只有在这里你是明确的。

从垂直列表中停止Bootstrap列

2 个答案: