Bootstrap4 list-groupの枠線を消したい

Question

現在Bootstrap4を使用してwebの制作をしています。
list-groupを使って横並びリストを作成したのですが、
list-group-flushを使っても画像のように上下の枠線が消えません。
線を消す方法を教えてください。

![

<div class="container  headernav">
  <div class="row align-items-end">
    <div class="logoimg col-2 pt-2 my-3 px-0 ">
      <a herf src="index.html">
        <img src="img/logo.png" class="img-fluid" alt="Apple Berry made with B">
      </a>
    </div>
    <div class="navlist col-5 pt-2 pb-0 my-3 px-0">
      <ul class="list-group navlistgroup list-group-horizontal list-group-flush ">
        <li class="list-group-item flex-fill p-0">
          <a herf src="#login" class="img-fluid" alt="login">
            <img src="img/menu_login.png" class="img-fluid" alt="Login">
          </a>
        </li>
        <li class="list-group-item flex-fill p-0">
          <a herf src="#cart" class="img-fluid" alt="cart">
            <img src="img/menu_cart.png" class="img-fluid" alt="cart">
          </a>
        </li>
        <li class="list-group-item flex-fill p-0">
          <a herf src="#mypage" class="img-fluid" alt="My page">
            <img src="img/menu_mypage.png" class="img-fluid" alt="My page">
          </a>
        </li>
        <li class="list-group-item flex-fill p-0">
          <a herf src="#guide" class="img-fluid" alt="Shopping Guide">
            <img src="img/menu_guide.png" class="img-fluid" alt="Shopping Guide">
          </a>
        </li>
      </ul>
    </div>
    </div>
  </div>
</div>

Answer 1

list-group-flushを使っても

.list-group-flush を適用すると, 親コンテナ（カードなど）内でリストグループアイテムを端から端までレンダリングするために, いくつかの枠線と丸みのある角が削除されます。(日本語訳マニュアルより)

とのことで、挙動としては正しいです。

上下の線は自前で消すしかないように思います。
.list-group-flush > .list-group-itemに対してborder-withが0 0 1pxで適用されているので、ここを0になるように自前でcss書くと良いです。

※ただこのまま.list-group-flush > .list-group-itemに対して指定してしまうと全てのflushに対して有効となるのでidあてたほうが良いとは思います。

Comments

[neekoneko]

回答ありがとうございます。
ulにidを追加で間違いありませんでしょうか？

[m.ts10806]

あくまで要件次第です。他にもflushを適用する可能性があってボーダーを生かしたいなら個々に指定するようにしたほうが良いと言う話です。

最低限やることは自前でボーダーを０にすること。