5つのパーツを横1列にして並ばせたいです

Question

前提・実現したいこと

今の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>

<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="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> ```

.container-small{
	width:700px;
}

.container-fluid-head{
margin-right: auto;
margin-left: auto;
max-width: 1100px;
}

.container-fluid-back{
	background:#F3F9F6;
	margin-top:50px;

}
.menupic{
	padding:30px 15px 10px;
}

.menupic2{
	padding:30px 0px 10px 0px;
	width:500px;
	height:275px;
	overflow:hidden;
}

.topborder .col-sm-3{
	border-left:2px solid #fff;

}

.topborder .col-sm-3:first-child{
	border:0;
}

試したこと

<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' />

よろしくお願いします。

ここにより詳細な情報を記載してください。

Comments

[kaba]

phpのソースコードを記載するより、出力されるhtmlを記載していただいたほうが回答する側としては楽なのですが、どうでしょう？

[satoshi1111]

かしこまりました。10分ほどお待ちください。

[m.ts10806]

CSSフレームワーク「BootStrap」をご利用なのでしょうか。利用しているCSSフレームワークをタグに追加し、バージョンも環境情報として追記してください。

[m.ts10806]

あと、もしかして「WordPress」もご利用でしょうか。タグに追加し、利用しているテーマを環境情報として追記してください。

[satoshi1111]

mts10806様、かしこまりました。

[satoshi1111]

そして、CSSフレームワークは使用していません。どうかよろしくお願いします。

[m.ts10806]

んーそうですか。「col-sm-3」というような指定を個人で作ったCSSでするようには思えませんが、まあ、そういうなら仕方ないです。

[satoshi1111]

そーなのですか！？実は自分も引き継いだばかりでして、CSSフレームワークのこともあまりわかっていません。どうにか確認する方法はありますでしょうか？

[m.ts10806]

んー、PHPはいいのですがWordPressはよくわからないんですよね。どのように反映されているか。プラグインかもしれないし、header.phpとかかもしれませんし。ひとまずそのページにアクセスして「ソースを表示」をしてcssのlinkを探してみてください。bootstrapというファイル名のCSSがあればそれです。

[satoshi1111]

ありました。やはり使われていたようです。どうかお願いします！

[yoshinavi]

「mts10806」さんのコメントにあるように「BootStrap」のタグを質問タグに追加されると「BootStrap」に詳しい方の目に止まり易くなりますので、追加してください。また、HTMLの<head>内や、Chromeのデベロッパーツール等で見ると、適用されているCSSが分かると思います。

[m.ts10806]

htmlとしておかしいところが散見されますが、これはほんとうにこう書いてあるのですか？例：<a href="<"http://concept/ " > 　<a href=""http://cuisine/ " >

[satoshi1111]

そこの辺りは「<a href="http://www.〇〇-co.jp/concept/">」というように企業のURLが書いてありましたので伏せさせてもらいました。

[satoshi1111]

「yoshinavi」さん　ありがとうございます。タグの方、追加させてもらいました。

[m.ts10806]

なるほど。htmlとしては正しくない形となり余計な詮索を強いますので、例えばexample.comといった例示ドメインに置き換えてください。

[satoshi1111]

変えておきました。よろしくお願いします。

[m.ts10806]

最初のaのhrefのところ、本当に中に<"ってあります？これだけで正しく動かない要因になり得ますよ

Answer 1

他にも方法はありますが1番簡単なのは
offsetかと思います。（bootstrapにあるクラスです）

<div class="col-sm-2 col-sm-offset-1 col-xs-15 text-center menus">    
<div class="col-sm-2 col-xs-15 text-center menus">    
<div class="col-sm-2 col-xs-15 text-center menus">    
<div class="col-sm-2 col-xs-15 text-center menus">    
<div class="col-sm-2 col-xs-15 text-center menus">

Answer 2

bootstrapは詳しくないので的外れかも知れませんが、各<div class="col-sm-3 col-xs-15 text-center menus">がwidth:25%;なので、width:20%;のクラスを追加してはどうですか？

※一部、誤記述だったので編集しました。

例）
CSSにオリジナル名でクラス作成

.new-5-col {　/* ← 適当なクラス名 */
  width: 20%; /* ← 5等分なので20％ */
}

該当のHTMLタグ5か所にクラス名追加

<div class="col-sm-3 col-xs-15 text-center menus new-5-col">  
　･･･
　･･･
　<p class="hidden-xs">牛の乗った<br>牛丼屋の。</p>  
　･･･
　･･･
</div>  

Comments

[yoshinavi]

「mts10806」さんのご指摘どおり、タグの不具合がいくつかありましたので、しっかり見直されると良いかと思います。

[yoshinavi]

＞並べる際に、ひとつのコンテンツを小さくはしたくないです。

→　幅25％を20％で提案しましたが、floatにより25％のままだと「カラム落ち」にどうしてもなります。現在の25％の幅を維持させると横スクロールが出ますがそれでも良いのでしょうか？