前提・実現したいこと
今のHTMLだと
コンテンツが
「牛丼」「豚丼」「鳥丼」「海鮮丼」
「なんでも丼」
という並びになってしまいます。
これを
「牛丼」「豚丼」「鳥丼」「海鮮丼」「なんでも丼」
という感じで1列に並ばせたいです。
また、並べる際に、ひとつのコンテンツを小さくはしたくないです。
該当のソースコード
<div class="container"> <div class="row topborder"> <div class="col-sm-3 col-xs-15 text-center menus"> <a href="<"http://example.com"> <div class="menupic"> <img src=jpg" width="210" height="201" class="hidden-xs img-responsive m-maxwidth" alt="牛丼"> <img src=".jpg" width="640" height="380" class="visible-xs" alt="牛丼"> </div> <p class="hidden-xs">牛の乗った<br> 牛丼屋の。</p> <button class="btn btngreen2">牛丼</button></a> </div> <div class="col-sm-3 col-xs-15 text-center menus"> <a href="http://example.com"> <div class="menupic"> <img src=".jpg" width="210" height="201" class="hidden-xs img-responsive m-maxwidth" alt="豚丼"> <img src=".jpg" width="640" height="380" class="visible-xs" alt="豚丼"> </div> <p class="hidden-xs">豚の乗った<br> 豚丼屋の。</p> <button class="btn btngreen2">豚丼</button></a> </div> <div class="col-sm-3 col-xs-15 text-center menus"> <a href="http://example.com"> <div class="menupic"> <img src=.jpg" width="210" height="201" class="hidden-xs img-responsive m-maxwidth" alt="鳥丼"> <img src=".jpg" width="640" height="380" class="visible-xs" alt="鳥丼"> </div> <p class="hidden-xs">最新の鳥の乗った<br> 鳥丼屋の。 </p>HTMLここに言語名を入力
1
</div> <div class="col-sm-3 col-xs-15 text-center menus"> <a href="http://example.com"> <div class="menupic"> <img src=".jpg" width="210" height="201" class="hidden-xs img-responsive m-maxwidth" alt="海鮮丼"> <img src=".jpg" width="640" height="380" class="visible-xs" alt="海鮮丼"> </div> <p class="hidden-xs">くじらの乗った<br> クジラ屋さんの。</p><button class="btn btngreen2">鳥丼</button></a>
</div> <div class="col-sm-3 col-xs-15 text-center menus"> <a href="http://example.com"> <div class="menupic"> <img src="a.jpg" width="210" height="201" class="hidden-xs img-responsive m-maxwidth" alt="なんでも丼"> <img src="m.jpg" width="640" height="380" class="visible-xs" alt="なんでも丼"> </div> <p class="hidden-xs">なんでも乗っける<br> 新商品</p><button class="btn btngreen2">海鮮丼</button></a>
</div> </div> </div> </div><!-- menu end --> <CENTER><img src="e.jpg" alt="栄養満点" /></CENTER> <p><CENTER><div class="youtube-wrapper"><iframe width="640" height="360" src="https://www.youtube.com frameborder="0" allowfullscreen></iframe></div></CENTER></p> <CENTER><img src="le.jpg" alt="栄養満点" /></CENTER> <br> </div> ```<button class="btn btngreen2">なんでも丼</button></a>
CSS
1 2.container-small{ 3 width:700px; 4} 5 6.container-fluid-head{ 7margin-right: auto; 8margin-left: auto; 9max-width: 1100px; 10} 11 12.container-fluid-back{ 13 background:#F3F9F6; 14 margin-top:50px; 15 16} 17.menupic{ 18 padding:30px 15px 10px; 19} 20 21.menupic2{ 22 padding:30px 0px 10px 0px; 23 width:500px; 24 height:275px; 25 overflow:hidden; 26} 27 28.topborder .col-sm-3{ 29 border-left:2px solid #fff; 30 31} 32 33.topborder .col-sm-3:first-child{ 34 border:0; 35}
試したこと
<div class="col-sm-3 col-xs-15 text-center menus">の数値や、 CSSのそれぞれのclass名のとこの数値を弄ったりしました。。
補足情報(FW/ツールのバージョンなど)
wordpressの利用しているテーマです
/yws/wp-content/plugins/show-current-template/css/style.css'
「https://website-homepage.com/free-question-bbs-about-wordpress/research-the-theme-name」
このページに記載されている方法で、突き止めました。
またCSSフレームワークは「bootstrap」のようです。
<link rel='stylesheet' id='sb_instagram_icons-css' href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?1' type='text/css' media='all' />よろしくお願いします。
ここにより詳細な情報を記載してください。