BootStrapでの立幅を変化させたい

Bootstrapを使ってboxの大きさを変化させたいです。

box1とbox3はキープしてbox2だけでbox4の部分まで使いたいです。
box4は使いません。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Document</title>
7
8   
9    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
10</head>
11<body>
12    <div class="container-fluid">
13        <div class="row">
14            <div class="box1 col-3" style="background-color: green">
15                box1
16            </div>
17            <div class="box2 col-9" style="background-color: red;">
18                box2
19            </div>
20        </div>
21        <div class="row">
22            <div class="box3 col-3" style="background-color: blue">
23                box3
24            </div>
25            <div class="box4 col-9" style="background-color:yellow;">
26                box4
27            </div>
28        </div>
29    </div>
30    
31
32    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
33<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
34<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
35</body>
36</html>

revoiot

2020/11/29 14:03

CSSも見せてください

Larkiwing

2020/11/29 14:11

cssは何も書いてません。

revoiot

2020/11/29 14:13

Larkiwing

2020/11/29 14:16

変更しました

revoiot

2020/11/29 14:21

bootstrapを使用するにあたってのcssはどこですか？わからなければ、下記を参考 https://webst8.com/blog/css-bootstrap-howto/

行動規範の内容に同意します

回答1件

ベストアンサー

下記でどうですか。

html
1<body>
2  <div class="container-fluid">
3    <div class="row">
4      <div class="col-3 px-0">
5        <div class="box1" style="background-color: green">
6          box1
7        </div>
8        <div class="box3" style="background-color: blue">
9          box3
10        </div>
11      </div>
12      <div class="box2 col-9" style="background-color: red;">
13        box2
14      </div>
15    </div>
16  </div>
17</body>

Bootstrapだと凝ったレイアウトにしようとするとHTMLがどうしても複雑になりますね。

蛇足ですか、CSS Grid を使うとHTMLをシンプルにできて、CSSもシンプルな記述で同様の実装ができます。

html
1<div class="container-grid">
2  <div class="box1">
3    box1
4  </div>
5  <div class="box2">
6    box2
7  </div>
8  <div class="box3">
9    box3
10  </div>
11</div>

css
1.container-grid {
2  display: grid;
3  grid-template-columns: 1fr 3fr;
4}
5.box1 {
6  background-color: green
7}
8.box2 {  
9  grid-row: span 2;
10  background-color: red;
11}
12.box3 {  
13  background-color: blue;
14}