Question

我有来自桌面的这个专栏

|      col-lg-5       | col-lg-2 | | col-lg-2 | | col-lg-2 |

如何在移动设备上制作

|            col-sm-12           |
| col-sm-4 | col-sm-4 | col-sm-4 |

我试试这个

<div class="col-sm-12 col-md-12 col-lg-5">
   xxx
</div>
<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">
   xxx
</div>
<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">
   xxx
</div>
<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">
   xxx
</div>

但在移动显示

|   col-12   |
|   col-12   |
|   col-12   |
|   col-12   |

Answer 1

您必须在with my_table(tag_name) as ( values ('tag1'), ('tag2'), ('tag3') ) select string_agg(format('''%s''', tag_name), ';' order by tag_name) tag_names from my_table; tag_names ---------------------- 'tag1';'tag2';'tag3' (1 row)内定义引导网格系统，然后您将在页面上显示网格。

在您的代码中尝试此操作

.row

注意： Bootstrap 4.0版已删除<div class="row"> <div class="col-12 col-sm-12 col-md-5"> xxx </div> <div class="col-4 col-sm-4 col-md-2"> xxx </div> <div class="col-4 col-sm-4 col-md-2"> xxx </div> <div class="col-4 col-sm-4 col-md-2"> xxx </div> </div>类。 Check available classes

这里也是片段，

＆＃13;

.col-xs

＆＃13;

Answer 2

不应使用col-xs-4或col-4，而应使用<div class="row"> <div class="col-12 col-lg-5"> xxx </div> <div class="col-4 col-md-2 col-lg-2"> xxx </div> <div class="col-4 col-md-2 col-lg-2"> xxx </div> <div class="col-4 col-md-2 col-lg-2"> xxx </div> </div>，这意味着您希望它跨越4列，不仅适用于sm和md或xs和md之间的视口，而且所有视口达到md。这样做。

col-sm-12 col-md-12 col-lg-5

您不必撰写col-sm-12 col-lg-5，只需撰写<button type="button" onclick="selectBox(document.getElementById('targetText'))">Push to Select</button> function selectBox(elem) { //Create a range (a range is a like the selection but invisible) var range = document.createRange(); // Select the entire contents of the element range.selectNodeContents(elem); // Don't select, just positioning caret: // In front // range.collapse(); // Behind: // range.collapse(false); // Get the selection object var selection = window.getSelection(); // Remove any current selections selection.removeAllRanges(); // Make the range you have just created the visible selection selection.addRange(range);即可。同样对于其他div也是如此。

复杂的Bootstrap堆叠在移动设备上的列

2 个答案: