Question

我正在尝试执行以下操作：

中画面

| ... ... IMG ... || ... ...细节|| ... ...详细|| ... ...详细|
............. | ... ...详细|| ... ...详细|| ... ...详细|

小屏幕

| ... ... IMG ... || ...详细|
............. | ...详细... |
............. | ...详细... |
............. | ...详细... |
............. | ...详细... |
............. | ...详细... |
............. | ... ...详细|

这是我的代码：

<div class="container">
    <div class="row">
        <div class="col-md-2 col-sm-6 col-xs-6 pull-left">Map</div>
        <div class="col-md-2 col-sm-2 col-xs-6 pull-right">detail</div>
        <div class="col-md-2 col-sm-2 col-xs-6 pull-right">detail</div>
        <div class="col-md-2 col-sm-2 col-xs-6 pull-right">detail</div>
        <div class="col-md-2 col-sm-2 col-xs-6 pull-right">detail</div>
    </div>
</div>

只要列的格式保持不变，也可以调整img的大小。我为这个凌乱的图表而道歉（没有足够的点张贴图片......）

谢谢！

Answer 1

您的第一列将包含图像，第二列将包含详细信息。在第二列中，您可以创建多行。

<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-6 col-xs-6">Map</div>
        <div class="col-md-6 col-sm-6 col-xs-6">
            <div class="row">
                <div class="col-md-4 col-sm-12 col-xs-12">detail</div>
                <div class="col-md-4 col-sm-12 col-xs-12">detail</div>
                <div class="col-md-4 col-sm-12 col-xs-12">detail</div>
            </div>
        </div>
    </div>
</div>

Bootstrap控制列堆栈的方式

1 个答案: