gpt4 book ai didi

css - Bootstrap : Full width grid with columns in container

转载 作者:行者123 更新时间:2023-12-04 19:12:59 26 4
gpt4 key购买 nike

我想创建一个全宽布局,左边是蓝色的一半,右边是红色的一半。

之后,我想在布局内但在容器内添加文本。

这可能吗?

编辑:您可以看到,绿色容器的大小与蓝色和红色一半内的 col-6 不同。

* {
color: white;
}
.blue-half {
background: blue;
}
.red-half {
background: red;
}
.green {
background: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container green">
I am the normal container!
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 blue-half">
<div class="container-fluid text-center">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
I am first half of the blue container!
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
I am second half of the blue container!
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 red-half">
<div class="container-fluid text-center">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
I am first half of the red container!
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
I am second half of the blue container!
</div>
</div>
</div>
</div>
</div>
</div>

最佳答案

变体2.将容器分成两部分

您可以为容器的每一半定义一个新类。但在此解决方案中,您需要控制两半具有相同的高度。

.blue { background: blue; color: white; }
.red { background: red; color: white; }

.container-left-half,
.container-right-half {
padding-right: 15px;
padding-left: 15px;
}
.container-left-half {
margin-right: 0;
margin-left: auto;
}
.container-right-half {
margin-right: auto;
margin-left: 0;
}
@media (min-width: 768px) {
.container-left-half,
.container-right-half {
width: 375px;
}
}
@media (min-width: 992px) {
.container-left-half,
.container-right-half {
width: 485px;
}
}
@media (min-width: 1200px) {
.container-left-half,
.container-right-half {
width: 585px;
}
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
<div class="row">
<div class="col-xs-6 blue">
<div class="container-left-half">
<div class="row">
<div class="col-xs-12">This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue!</div>
</div>
</div>
</div>
<div class="col-xs-6 red">
<div class="container-right-half">
<div class="row">
<div class="col-xs-12">This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red!</div>
</div>
</div>
</div>
</div>
</div>

变体 1. 线性渐变和俄罗斯套娃

1) 您可以使用 the linear-gradient() function制作双色背景。

2) Bootstrap 有 rowstwo types of containers :

Use .container for a responsive fixed width container.

Use .container-fluid for a full width container, spanning the entire width of your viewport.

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

3) 所以你可以做一个俄罗斯套娃:
.container-fluid > .row with linear-gradient > .container > .row with content

Matryoshka is a set of brightly painted hollow wooden dolls of varying sizes, designed to nest inside one another.

matryoshka

4) col-xs-6相当于col-xs-6 col-sm-6 col-md-6 col-lg-6 .

.two-colors {
background: linear-gradient(to right, blue 50%, red 50%);
color: white;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container-fluid">
<div class="row two-colors">
<div class="container">
<div class="row">
<div class="col-xs-6">This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue! This is a left half of the container. It's blue!</div>
<div class="col-xs-6">This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red! This is a right half of the container. It's red!</div>
</div>
</div>
</div>
</div>

关于css - Bootstrap : Full width grid with columns in container,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39536794/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com