Question

我使用列insight列在我的引导列之间创建了空格。但是，当我开始调整窗口大小时，列之间的距离变小并最终消失，两列都开始重叠，其他列重叠。使用bootstrap调整大小时如何保留空间？感谢!!!

HTML：

<header id="home">
    <div class="container-fluid">
        <div class="row center-block home_boxes_row">
            <div class="col-sm-4">
                <div class="col-xs-12 home_box_left">
                   <p>teststetsttsgdbdshchdchdchdfvhfvhfvndvhdvvf</p>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="col-xs-12 home_box_right"></div>
            </div>
            <div class="col-sm-4">
            </div>
        </div>
    </div>
</header>

CSS：

#home {
  height: 1100px;
  background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg");
  background-size: cover;
  width: 100%;
  .home_boxes_row {
    margin-top: 200px;
    .home_box_left {
      width: 300px;
      height: 300px;
      background-color: $green;
      padding: 5px;
    }
    .home_box_right {
      width: 300px;
      height: 300px;
      background-color: $blue;
      padding: 5px;
    }
  }

}

Answer 1

Boostrap在构建时充分考虑了响应性。因此，将两列的宽度设置为像素宽度将在大多数情况下破坏布局。宽度应该由引导程序处理。

以下摘要应该为您提供所寻求的内容。

通过在列内创建div，然后设置边距来实现间距。我为此添加了单独的类（.spacing_right和.spacing_left）。

我使用过Bootstrap 4，但它也适用于Bootstrap 3 注意： bootstrap 4已将col-xs- *替换为col - *。

Sub TestDecodeToFile()

    Dim strTempPath As String
    Dim b64test As String

    'little face logo
    b64test = "R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48" & _
    "CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="

    strTempPath = ThisWorkbook.Path & "\temp.png" 'use workbook path as temp path

    'save byte array to temp file
    Open strTempPath For Binary As #1
       Put #1, 1, DecodeBase64(b64test)
    Close #1

End Sub

Private Function DecodeBase64(ByVal strData As String) As Byte()

    Dim objXML As Object 'MSXML2.DOMDocument
    Dim objNode As Object 'MSXML2.IXMLDOMElement

    'get dom document
    Set objXML = CreateObject("MSXML2.DOMDocument")

    'create node with type of base 64 and decode
    Set objNode = objXML.createElement("b64")
    objNode.DataType = "bin.base64"
    objNode.Text = strData
    DecodeBase64 = objNode.nodeTypedValue

    'clean up
    Set objNode = Nothing
    Set objXML = Nothing

End Function

#home {
  overflow: auto;
  height: 1100px;
  width: 100%;
  background-image: url("https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg");
  background-size: cover;
}

.home_boxes_row {
  margin-top: 200px;
}

.home_box_left {
  background-color: orange;
  margin-top: 5px;
}

.home_box_right {
  background-color: red;
  margin-top: 5px;
}

.spacing_right {
  height: 100%;
  margin-right: 25px;
  background-color: green;
}

.spacing_left {
  height: 100%;
  margin-left: 25px;
  background-color: green;
}

Bootstrap - 如何在调整大小（垂直和水平）时保持引导列之间的空间？

1 个答案: