Bootstrapのリスト(ul , li) 内で画像をレスポンシブ表示できない

Question

Bootstrapを利用して開発をしていますが、
リスト（ul 、li）タグの内部で画像をレスポンシブ表示しようとしていますが
画像を横並び4個表示ができません。
対処方法があれば教えてください。

    <div class="row">
      <div class="col-sm-12">
        <div class="row" id="instagram">
          <ul class="list-group list_instagram">
            <li>
              <a href="https://www.instagram.com/p/Bh3M-/" target="_blank">
                <img src="https://scontent.cdninstagram.com/t51.2885-15/s6400/0.08/e35/20_n.jpg?ig_cache_key=MTQwOD2MTg4Ng%3D%3D.2">
              </a>
            </li>
            <li>
              <a href="https://www.instagram.com/p/Byy/" target="_blank">
                <img src="https://scontent.cdninstagram.com/t51.2885-15/s0/sh0.08/e35/32_n.jpg?ig_cache_key=%3D%3D.2">
              </a>
            </li>
            <li>
              <a href="https://www.instagram.com/p/BOBzz4gB85Z/" target="_blank">
                <img src="https://scontent.cdninstagram.com/t51.2885-15/sh0.08/e35/p640/54_n.jpg?ig_cache_key=MTQ
wQ0ODYwOTD%3D.2">
              </a>
            </li>
            <li>
              <a href="https://www.instagram.com/p/BN8dodGhsOv/" target="_blank">
                <img src="https://scontent.cdninstagram.com/t51.2885-15/0/sh0.08/e35/52_n.jpg?ig_cache_key=MTQwNDEyNQ%3D%3D.2">
              </a>
            </li>
          </ul>

CSS

ul.list_instagram li{
  list-style-type:none;
  display: inline-block;
}

Answer 1

リスト（ul 、li）タグの内部で画像をレスポンシブ表示

内部でレスポンシブ表示？というのがよく分かりませんが・・PCでもスマホでも4つ並べたいのですか？
ul liに拘らずにグリッドで並べればPCやスマホに応じた形で設定してあげればよろしいのではと思います。
http://getbootstrap.com/css/#grid

か、もうbootstrap任せはやめることです。
画像にはwidthやmax-widthを設定すべきですし、アスペクト比によってはcropしたほうがいいかもしれませんし、
画面サイズによってどう並べたいのかを確定させるべきでしょう。
その上で丁寧にメディアクエリを設定してあげてください。

横並びにinline-blockを使わずにflexを使い、どの解像度でも中央に寄せるjustify-content: center;を追加すればいいかもしれません。css3前提ですが。