Question

我有一个需要为桌面创建的引导图像网格，您可以在下面看到布局。

我遇到的问题是中心框超过两行，所以我不知道如何实现它。可能是一个新手问题，但任何帮助都将不胜感激！

Answer 1

类似的事情应该做。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="well">1</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="well">2</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="well">3
            <br>
            <br>
            <br>
            <br>
            <br>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-12">
                <div class="well">4</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="well">6</div>
    </div>
    <div class="col-md-6">
        <div class="well">7</div>
    </div>
</div>

Answer 2

网格有12列。如果您的行中总网格的总和大于12，则网格可能会重叠。您可以将所有内容放在一行中，然后将其划分为3。将第一行和第三行划分为2行，并将中间的行作为中心行。

如果您共享代码，将会更容易理解。

Answer 3

您可以通过将大盒子放在一行中，外部小盒子放在同一行中来实现此目的，其中两个较小的盒子在一行中只是两个盒子。（高度均为50％）。

请看下面的示例代码：

Collecting pyinstaller
  Using cached https://files.pythonhosted.org/packages/03/32/0e0de593f129bf1d1e77eed562496d154ef4460fd5cecfd78612ef39a0cc/PyInstaller-3.4.tar.gz
  Installing build dependencies ... error
  Complete output from command c:\users\blaggr\appdata\local\programs\python\python37-32\scripts\python.exe -m pip install --ignore-installed --no-user --prefix C:\Users\blaggr\AppData\Local\Temp\pip-build-env-vd3w15r1 --no-warn-script-location --no-binary :none: --only-binary :none: -i https://pypi.org/simple --trusted-host pypi.python.org -- setuptools wheel:
  Collecting setuptools
    Retrying (Retry(total=4, connect=None, read=None, redirect=None, status=None)) after connection broken by 'ReadTimeoutError("HTTPSConnectionPool(host='pypi.org', port=443): Read timed out. (read timeout=15)")': /simple/setuptools/
    Retrying (Retry(total=3, connect=None, read=None, redirect=None, status=None)) after connection broken by 'ReadTimeoutError("HTTPSConnectionPool(host='pypi.org', port=443): Read timed out. (read timeout=15)")': /simple/setuptools/
    Retrying (Retry(total=2, connect=None, read=None, redirect=None, status=None)) after connection broken by 'ReadTimeoutError("HTTPSConnectionPool(host='pypi.org', port=443): Read timed out. (read timeout=15)")': /simple/setuptools/
    Retrying (Retry(total=1, connect=None, read=None, redirect=None, status=None)) after connection broken by 'ReadTimeoutError("HTTPSConnectionPool(host='pypi.org', port=443): Read timed out. (read timeout=15)")': /simple/setuptools/
    Retrying (Retry(total=0, connect=None, read=None, redirect=None, status=None)) after connection broken by 'ReadTimeoutError("HTTPSConnectionPool(host='pypi.org', port=443): Read timed out. (read timeout=15)")': /simple/setuptools/
    Could not find a version that satisfies the requirement setuptools (from versions: )
  No matching distribution found for setuptools

.box {
  height: 100%;
  width: 100%;
  background-color: lightgrey;
}

.box-container {
  width: 100%;
  height: 50%;  
  padding: 2px;
}

.big-box {
  height: 200px;
  background-color: lightgrey;
}

.col-3, .col-6 {
  padding: 0 !important;
}

注意：我已经使用<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-3"> <div class="box-container"><div class="box"></div></div> <div class="box-container"><div class="box"></div></div> </div> <div class="col-6"> <div class="big-box"></div> </div> <div class="col-3"> <div class="box-container"><div class="box"></div></div> <div class="box-container"><div class="box"></div></div> </div> </div> </div>和col-3来修饰小提琴以使其适合示例窗口，但是，如果需要响应性，可以使用{{1} }和col-6（如果希望以较小的尺寸折叠起来，则可以用col-md-3代替col-md-6）。

Bootstrap-如何将列高设置为多于一排？

3 个答案: