重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

急いでいます！

Bootstrap3でcontainerがずれる（画面の中央に配置する方法を教えてください）

解決済

  • 質問者：nongh_11
  • 質問日時：
  • 回答数：2件

Bootstrap3でcontainerがずれる（画面の中央に配置する方法を教えてください）。

どうもいくつかの要素が右にずれてる気がしたため、判りやすいように
borderをつけてみたところ、やはりずれています。

どのように修正すれば、中央に配置されますか？

http://3kaduki.link/index2.html

が該当ページで、ソースが以下です。

困っています。
よろしくおねがいします。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<title>ちいさな出版社＊†　三日月少女革命　†（ミカヅキカゲリ個人企画）</title>
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="./css/3kaduki2.css" rel="stylesheet" type="text/css">
<link href="./css/navi.css" rel="stylesheet" type="text/css"> <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv …
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min …
<![endif]-->



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.1 …
<script src="./js/jquery.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>


</head>
<body>


<div class="container bg-info" style="padding-top:20px">
<!--header-->


<!--mainVisual-->

<div class="row justify-content-center">
<div class="col-xs-12">

<div class="mainVisual_wrapper section">

<img src="./img/logo_3kaduki.png" style="margin-bottom:18px" alt="ちいさな出版社† 三日月少女革命 †" class="center-block img-responsive mainVisual" />
</div>
</div>



</div>
<!--//mainVisual-->




<!--//header-->
<!-- Default navbar ここから -->

（中略）

<!-- Default navbar ここまで -->







<!--section-->
<div class="section">
<div class="container center-block">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="col_box clearfix">
<div class="col-xs-6 col-sm-12">
<img src="./img/400x3002.gif" alt="ポストカード001" class="img-responsive" style="width:100%;"/>
</div>
<div class="col-xs-6 col-sm-12">
† 三日月少女革命 †　詩×写真postcard collection001<BR><BR>
イルミネーションの街をゆく<BR>
白い吐息には秘めた想い<BR>
君へと<BR>
君へと<BR>
加速する想いは流星になって<BR>
イルミネーションに。<BR>
<BR>
この煌きはみんなの秘めた想いだったんだね。<BR>
<div class="text-right">ミカヅキカゲリ</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="col_box clearfix">
<div class="col-xs-6 col-sm-12">
<img src="./img/400x3001.gif" alt="" class="img-responsive" style="width:100%;"/>
</div>
<div class="col-xs-6 col-sm-12">
† 三日月少女革命†　短歌×写真postcard collection002<BR><BR>
コンビニのおにぎり日本文化かな　煮玉子なんて花開いてる　　
<div class="text-right">ミカヅキカゲリ</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="col_box clearfix">
<div class="col-xs-6 col-sm-12">
<img src="./img/400x300.gif" alt="" class="img-responsive" style="width:100%;"/>
</div>
<div class="col-xs-6 col-sm-12">
写真と説明文のレイアウトが、ブレイクポイントによって変わります。
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="col_box clearfix">
<div class="col-xs-6 col-sm-12">
<img src="./img/400x300.gif" alt="" class="img-responsive" style="width:100%;"/>
</div>
<div class="col-xs-6 col-sm-12">
写真と説明文のレイアウトが、ブレイクポイントによって変わります。
</div>
</div>
</div>
</div>
</div>
</div>
<!--//section-->


（中略）

</div>

</div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： naokita
  • 回答日時：

#1さんご指摘の通り、containerの中にcontainerが入っていていますね？？


このcontainerは、1170pxの幅で、
paddingが15pxの両サイドなので、実質1140pxの内包枠になります。
その中に更にcontainerを入れたので、
左側に15pxのスペースが二重に多くなり、その分だけ右側がハミ出ます・・・
つまり、
1140pxの中に、1170pxを入れた矛盾したdiv枠になっています！

containerの中にrowを入れるだけなのに、
containerの中にcontainerを入れてrowを入れているから、
左側に15pxのスペースが二重に多くなり、その分だけ右側がハミ出ます・・・

その部分のcontainerが不要という事です！
試しに、そこのcontainerを削除してみましょう！


そもそも、
<div>も、どこかで閉じ忘れている・・・　初歩的な設計ミス！
このまま進めるとグチャグチャになりますよ。

------------------

というか、何故にBootstrap3なの？　Bootstrap4じゃないの？
（今の製作中の内に変更した方が良いかも）
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！
なるほどそういうことなんですねー。

探してやってみます。

できました！
判りやすい説明、ありがとう御座いました。


<div>タグの閉じ忘れ、お恥ずかしい限りです。
確かに初歩的なミスですね。探して修正します。

***

なぜ、Bootstrap３なのかと云うと、その頃から作業してて未だ公開に至っていないという・・・。
でもたしかにいまのうちに４にしておいたほうが賢明ですよね。
それもやってみます。
今回はありがとう御座いました。

通報する
お礼日時：2018/05/05 08:16

No.1

  • 回答者： Zimmerman
  • 回答日時：

たぶんですが、


containerを二重に使っているからではないでしょうか。

基本は大外をcontainerで括る。
あるいは、ネストをしないで、一度containerを閉じてから、下に改めてcontainerを置くのが
良いかと思います。

containerは幅を固定して、左右にマージンをとるため、
containerの中のcontainerは左のマージン分外と隙間ができ、
右にズレるということだと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！
なるほどそういうことなんですねー。

探してやってみます。

通報する
お礼日時：2018/05/05 08:04

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報