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>
No.2ベストアンサー
- 回答日時:
#1さんご指摘の通り、containerの中にcontainerが入っていていますね??
このcontainerは、1170pxの幅で、
paddingが15pxの両サイドなので、実質1140pxの内包枠になります。
その中に更にcontainerを入れたので、
左側に15pxのスペースが二重に多くなり、その分だけ右側がハミ出ます・・・
つまり、
1140pxの中に、1170pxを入れた矛盾したdiv枠になっています!
containerの中にrowを入れるだけなのに、
containerの中にcontainerを入れてrowを入れているから、
左側に15pxのスペースが二重に多くなり、その分だけ右側がハミ出ます・・・
その部分のcontainerが不要という事です!
試しに、そこのcontainerを削除してみましょう!
そもそも、
<div>も、どこかで閉じ忘れている・・・ 初歩的な設計ミス!
このまま進めるとグチャグチャになりますよ。
------------------
というか、何故にBootstrap3なの? Bootstrap4じゃないの?
(今の製作中の内に変更した方が良いかも)
ありがとうございます!
なるほどそういうことなんですねー。
探してやってみます。
できました!
判りやすい説明、ありがとう御座いました。
<div>タグの閉じ忘れ、お恥ずかしい限りです。
確かに初歩的なミスですね。探して修正します。
***
なぜ、Bootstrap3なのかと云うと、その頃から作業してて未だ公開に至っていないという・・・。
でもたしかにいまのうちに4にしておいたほうが賢明ですよね。
それもやってみます。
今回はありがとう御座いました。
No.1
- 回答日時:
たぶんですが、
containerを二重に使っているからではないでしょうか。
基本は大外をcontainerで括る。
あるいは、ネストをしないで、一度containerを閉じてから、下に改めてcontainerを置くのが
良いかと思います。
containerは幅を固定して、左右にマージンをとるため、
containerの中のcontainerは左のマージン分外と隙間ができ、
右にズレるということだと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
「目次」と「サブ目次」のスタ...
-
CSSのクラス名・ID名の指定でワ...
-
display:table-cell内でこんな...
-
IE9でCSS3が機能しない
-
最近、HTMLのヘッダーをIDで定...
-
CSSで、IDとCLASSを...
-
外部css定義したclassをht...
-
Bootstrap3でcontainerがずれる...
-
オンマウス時の背景色を個別に...
-
CSSで、DIV#hogeという記述は何...
-
CSSでID指定の親子を重ねる理由
-
classとIDの使い方?何が違うん...
-
セルの高さが変化しない(ワー...
-
スタイルシートで、id属性の中...
-
classとidの名前の付け方
-
個別にリンクの色を変える方法
-
一部のリンクの下線を消す
-
htmlの文字が縦書きになる
-
【ヒトの神秘】美男美女から何...
-
マージソートの計算量について-...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
idの中のid指定
-
CSSに同じclass名がいっぱい‥。...
-
個別にリンクの色を変える方法
-
HTML要素のid/class名の長さに...
-
最近、HTMLのヘッダーをIDで定...
-
CSS, リンクの色を一部変えるに...
-
liリストタグの背景色に色がつ...
-
CSSのクラス名・ID名の指定でワ...
-
htmlのid属性って必要なの?
-
サイトにjQueryが使用されてい...
-
スタイルシートで、id属性の中...
-
外部css定義したclassをht...
-
リンク文字の 一部だけ色を変...
-
ページの左右の余白(枠外)に...
-
<span>で2重にかけているものを...
-
CSSでテキストリンクの色を複数...
-
同ページ内でリンクの色を変え...
-
CSSが効かずどのように指定すれ...
-
display:table-cell内でこんな...
-
CSSの適用を一部だけ除外したい。
おすすめ情報