bootstrapでWebサイトの両脇に画像を載せたい

Question

現在以下のようなサイトになっています

http://codepen.io/anon/pen/wzWPdg

やりたいこと

1. コンテンツ（灰色の部分）の両側に画像（150 x 600)を置きたい。
2. 画像（150 x 600)が邪魔になる場合もあるので、画面幅が小さい場合は画像を表示さいない。

トライした結果

試行錯誤したのですがうまくいかない状況が以下のURLです。
http://codepen.io/anon/pen/LRkOLK

発生している問題

1. ヘッダーのタイトルが中央に寄っている（左端に固定されていない）
2. コンテンツと画像が中央に寄っていない（左端に固定されている）
3. ウィンドウ幅が768px以下になるとコンテンツが細くなる

Comments

[twin_bird]

灰色のコンテナにもmin-widthとwidth:100%をつけて、全体としてカラム落ちしないような設定する必要があるのでは？ bootstrapのクラス名に従わがわなくても良いということであれば、今流行りのflexボックスとやら使った方が楽な気がしました。

Answer 1

こんな感じでいかがでしょう？
昔のIEなどを無視してOKならflexboxが手っ取り早いですが…

body { padding-top: 75px; }

.boxContainer {
	margin: 0 auto;
	overflow: hidden;
}
.box_image { display: none; }


@media (min-width: 1200px) {
	.navbar .container {
		width:1470px;
		padding-left: 165px;
		padding-right: 165px;
	}
	.boxContainer {
		display: table;
		width:1470px;
	}
	.box {
		display: table-cell;
	}
}

<!-- <center>はhtml5で廃止されているので削除 -->
<div class="boxContainer">

	<!-- idはページ内で同名は使用できないのでclassに書く -->
	<div class="box box_image">
		<img src="https://dummyimage.com/150x600">
	</div>

	<div class="container box" style="background: gray">
		<!-- コンテンツを可視化する為の空要素 -->
		<div style="height: 1000px"></div>
	</div>

	<div class="box box_image">
		<img src="https://dummyimage.com/150x600">
	</div>
</div>
<!-- </center>は削除-->

Comments

[aglkjggg]

ありがとうございます。
非常に参考になりました。
しかし、flexboxという単語を初めて知り、調べた結果今回はflexboxを利用することにしました。
以下が今回の結論となりました。
※初めてflexboxに触れるので、flexboxの使い方として適切なのかはわかりませんが。
http://codepen.io/anon/pen/XjKBJE