Question

我正在使用 Bootstrap 3.1.1 创建网站。 body代码的min-width为800px。

我试图显示的数据需要出现在网格中。它是停车场的代表。

这是我想要实现的截图（至少目前为止）。当我的窗口大于某个点时，这就是数据显示的方式（我不知道浏览器工作时的宽度是多少）。

good

这是窗户太小时发生的事情（部分）：

bad

首先，这是一个固定宽度的网站的部分原因是因为我需要显示它。我如何使用bootstrap作为它的网格布局，但是保持列不被包裹？

以下是我尝试对数据进行分组的方法：

<div class="row" style="width:100%;">
    <div class="col-xs-1"> <!-- a single row, e.g. 392-337 -->
        <div class="col-xs-6 pull-left"> <!-- the numbers on the left hand side, 392-365 -->
            <div class="col-xs-12">
                392
            </div><div class="col-xs-12">
                391
            </div><div class="col-xs-12">
                390
            </div><div class="col-xs-12">
                389
            </div><div class="col-xs-12">
                388
            </div><div class="col-xs-12">
                387
            </div><div class="col-xs-12">
                386
            </div><div class="col-xs-12">
                385
            </div><div class="col-xs-12">
                384
            </div><div class="col-xs-12">
                383
            </div>
        </div><div class="col-xs-6 pull-right"> <!-- numbers on the right hand side, 364-337 -->
            <div class="col-xs-12">
                364
            </div><div class="col-xs-12">
                363
            </div><div class="col-xs-12">
                362
            </div><div class="col-xs-12">
                361
            </div><div class="col-xs-12">
                360
            </div><div class="col-xs-12">
                359
            </div><div class="col-xs-12">
                358
            </div><div class="col-xs-12">
                357
            </div><div class="col-xs-12">
                356
            </div><div class="col-xs-12">
                355
            </div>
        </div>
    </div>
</div>

Answer 1

col-xs-1不允许列中的两个宽，它太瘦了。将div class="col-xs-1"更改为div class="col-xs-2 col-md-1"，或者如果您想要自定义宽度而不是添加自己的自定义％宽度。

我认为您不需要所有其他col-xs-12，因为这会增加额外的填充。

<强> Bootply with fixes

或者，如果您希望列更靠近，请使用col-xs-4代替col-xs-6，只需确保在转到下一列之前创建新的<div class="row">（{{ 3}}）

更新了HTML：

<div class="row" style="width:100%;">
    <div class="col-xs-2 col-md-1"> <!-- a single row, e.g. 392-337 -->
      <div class="row">
        <div class="col-xs-6"> <!-- the numbers on the left hand side, 392-365 -->
            <div>392</div>
            <div>391</div>
            <div>390</div>
            <div>389</div>
            <div>388</div>
            <div>387</div>
            <div>386</div>
            <div>385</div>
            <div>384</div>
            <div>383</div>
        </div>
        <div class="col-xs-6"> <!-- numbers on the right hand side, 364-337 -->
            <div>364</div>
            <div>363</div>
            <div>362</div>
            <div>361</div>
            <div>360</div>
            <div>359</div>
            <div>358</div>
            <div>357</div>
            <div>356</div>
            <div>355</div>
        </div>
      </div>
    </div>
</div>

如何将列包装成单个列？

1 个答案: