画面全体に縦線を引く方法

Question

前提・実現したいこと

bootstrap4
画面全体に縦線をひきたいが、要素に対してしか線が引かれない。しかもcol-6の要素の長さによって縦線の長さがきまっているのも理解できなかった。

該当のソースコード

  <div class="container-fluid">
    <div class="row">


      <div class="col-md-3 border-right d-none d-md-inline-block">
        <div class="position-fixed scroll center">
        <div class="d-inline-flex flex-column align-items-start">
          <a class="btn btn-lg mt-4 link_button" href="/">a</a>
          <a class="btn btn-lg mt-4 link_button" href="/">a</a>
          <a class="btn btn-lg mt-4 link_button" href="/">a</a>
          <a class="btn btn-lg mt-4 link_button" href="/">a</a>
          <a class="btn btn-lg mt-4 link_button" href="/">a</a>
          <a class="btn btn-lg mt-4 link_button" href="/">a</a>
          <a class="btn btn-lg mt-4 link_button2" href="/">a</a>
          <a class="btn btn-lg mt-4 link_button" href="/">a</a>
        </div>
        </div>
      </div>






     <div class="col-6 padbottom d-none d-md-inline-block">
       <div class="text-center">
       @yield('content')
       </div>
     </div>



     <div class="col-md-3 border-left d-none d-md-inline-block">
       <div class="position-fixed center">
       <div class="d-inline-flex flex-column align-items-start">
          <a  class="btn btn-lg ml-btn-link mt-4" href="/">a</a>
          <a  class="btn btn-lg ml-btn-link mt-4" href="https://recochoku.jp/ranking/single/daily?affiliate=4410101009">a</a>
          <a  class="btn btn-lg ml-btn-link mt-4" href="https://music.dmkt-sp.jp/rank/single/daily/">a</a>

        </div>
        </div>
      </div>







</div>
</div>

Answer 1

こちらでいかがでしょうか?

.border-left,
.border-right {
  min-height: 100vh; /* 100vhで、画面の高さいっぱい */
}

しかもcol-6の要素の長さによって縦線の長さがきまっているのも理解できなかった。

Bootstrapの.rowには、display: flex;が指定されています。
この場合、align-itemsの初期値「stretch」の効果により、横並びにの子要素「.col-xx」の高さが揃います。

.colの高さが揃わないようにするためには、[1]か[2]のいずれかで実装する必要があります。

[1] Bootstrapの書き方であれば、「align-items-start」クラスを指定する (<div class="row align-items-start">)

[2] CSS側でalign-items: flex-start;を指定

Comments

[dato]

うまくできました！解説までしていただきありがとうございます。
クラスを使いこなすためにもっと理解する重要性を感じました。