Question

例如，如果我的列视图用于大屏幕

------ 1-（COL-LG-4）--------- | -------- 2-（COL-LG-4） - - - - - | ---- 3-（COL-LG-4）--------

我需要根据我的订单更改bootstrap中列的视图。我如何使用col函数进行更改？

--------- 1（COL-MD-6）----------- | ---------- 3（COL-MD-6） ----------

-------------------- 2（COL-MD-12）------------------- -

Answer 1

您可以将col-sm-12和col-xs-12用于HTML中的小视图。象 -

Function SiteStatus(Arg1 As String) As String
    Dim RFSTable As Workbook
    Dim RFSSheet As Worksheet
    Dim RFSSites As Range
    Set RFSTable = Workbooks("D:\RFS.xlsx")
    Set RFSSheet = RFSTable.Worksheets(3)
    Set RFSSites = RFSSheet.Range("B2:B10000")
        If WorksheetFunction.IsNA(WorksheetFunction.VLookup(Arg1, RFSSites, 1, 0)) = False Then
        SiteStatus = "ÎÇãæÔ"
        Else
        SiteStatus = "ÑæÔä"
        End If
End Function

如果没有为sm和xs指定任何类。默认情况下，它将占用100％的宽度，即col-sm-12本身。

如果你想将一行中的东西划分为大屏幕的徽标，搜索框，通知图标 -

试试这个 -

<div class="col-lg-4 col-md-6 col-sm-12 xol-xs-12">
<div>

希望这会对你有所帮助。

Answer 2

首先，警告：Bootstrap对于响应性地移动内容来说并不是最强大的。如果您可以删除旧的浏览器支持，则可以获得Flexbox的更可靠支持。

我相信这就是你要找的东西：

<div class="row">
   <div class="col-lg-4 col-sm-6"> <span>col 1</span> </div>
   <div class="col-lg-4 col-lg-push-4 col-sm-6"> <span>col 3</span> </div>
   <div class="col-lg-4 col-lg-pull-4 col-sm-12"> <span>col 2</span> </div>
</div>

正如您所看到的，代码在文档中的顺序不同，但它会产生您在上面映射的顺序：

https://jsfiddle.net/4jmzm9wm/

我如何更改引导程序中的列

2 个答案: