カラムを使いたいですが…

Question

ブートストラップを使用してWebサイトを作成していますが、
一倍、サイドバーは同幅で二倍のテキストの所だけ３つの二倍にする方法がわかりません
`

<div class="container-fluid h-100">
    <div class="row h-100">
        <div class="flex-column h-100">サイドバー</div>
        <div>
            <div>一倍</div>
            <div>二倍</div>
            <div>一倍</div>
        <div/>
    <div/>
<div/>

何を使えばいいでしょうか

Answer 1

flex-grow プロパティを使い、以下のように行えると思います (動作確認用リンク)。

<div class="container-fluid h-100">
  <div class="row h-100">
    <div class="flex-column h-100 col">サイドバー</div>
    <div class="col">一倍</div>
    <div class="col flex-grow-2">二倍</div>
    <div class="col">一倍</div>
  </div>
</div>

.flex-grow-2 {
  flex-grow: 2;
}

Comments

[yak_back]

どうも。