Question

我正在尝试创建类似于以下内容的布局：

“1/3”和“2/3”标签指的是我希望这些部分占据多少屏幕（在网络上）。

我创建了2行（分别有一列和两列）来尝试生成这种布局。但是，由于行堆栈，我最终得到一堆空格，所以我的布局看起来像这样：

如何向上移动蓝色区域以便没有空白区域，但它仍然响应并在较小的屏幕上移动到其他区域以下？

这是我的HTML：

<div class="container-fluid">
<div class="row onethird">
    <div class="col-sm-8 red">
        <h1>Title:</h1>
        <h1>Description of site</h1>
    </div>
</div>

<div class="row twothirds">
    <div class="col-sm-8 green">
        <h2>pictures go here</h2>
    </div>

    <div class="col-sm-4 blue">
        <h1>Signup form</h1>
        <h6>Signup field</h6>
        <h6>Signup field</h6>
        <h6>Signup field</h6>
        <h6>Signup field</h6>
    </div>
</div>

这是我的CSS：

.red {
background-color: red;
}

.blue {
background-color: blue;
}

.green {
background-color: green;
}

html, body {
height: 100%;
width: 100%;
}

.container-fluid {
height: 100%;
}

.row {
height: 100%;
}

.full {
height: 100%;
}

.onethird {
height: 33.333%;
}

.twothirds {
height: 66.6666%;
}

我尝试使用CSS和高度百分比以响应方式设置不同部分的高度。我的主要问题是浮动蓝色列。

我考虑将蓝色部分划分为两个不同的行，但最终会将注册表单的各个部分划分为较小的屏幕，我希望避免这样做。

任何帮助将不胜感激！提前致谢。

Answer 1

我认为这样做的正确方法是将左边的所有内容放入.col-sm-8，将右边的所有内容放入.col-sm-4。

查看以下示例。

＆＃13;

start() ->
    A = generate_list(),
    Hash = erlang:phash2(A),
    assert_loop(Hash).

assert_loop(Hash) ->
    ok = do_stuff(),
    Hash = erlang:phash2(generate_list()),
    loop(Hash).

＆＃13;

.red {
background-color: red;
}

.blue {
background-color: blue;
}

.green {
background-color: green;
}

html, body {
height: 100%;
width: 100%;
}

.container-fluid {
height: 100%;
}

.row {
height: 100%;
}

.full {
height: 100%;
}

.onethird {
height: 33.333%;
}

.twothirds {
height: 66.6666%;
}

＆＃13;

Answer 2

您可以为div使用不同的设置，将左侧元素堆叠在一个div中，将右侧的蓝色元素堆叠在它自己的div中。看看这个小提琴：https://jsfiddle.net/3budaekb/（我用过不同的类来代替引导程序）

1.SerializeContext(TMessageContext messageContext)
   at RawRabbit.Context.Provider.MessageContextProviderBase

Bootstrap浮动列可以消除空白

2 个答案: