web-dev-qa-db-ja.com

Bootstrap 3幅100％ではない液体容器

問題

Bootstrap 3をプロジェクトに実装することを考えており、このフロントエンドフレームワークに切り替える前に、その機能とプロパティの一部をテストしています。

私が気づいた奇妙なことは、流体Bootstrapコンテナが実際にはビューポート幅の100％にまたがっていないことです（ピンクのBootstrap要素の右側の1px行に注意してください）。

image

これが私のHTMLの外観です。基本的にはデフォルトのBootstrapテンプレートです。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Page title</title>
        <link rel="stylesheet" href="css/bootstrap.css"> <!-- Core CSS -->
        <link rel="stylesheet" href="css/test.css"> <!-- Custom CSS -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="full-width">This is not bootstrap</div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    This is Bootstrap
                </div>
                <div class="col-md-9">
                    This is Bootstrap too
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

明らかに、標準の最新のbootstrapのCSSバージョンと独自のカスタムCSSを使用します。

.full-width {
    width: 100%;
    background-color: #808080;
}
.col-md-3 {
    background-color: #4f4;
}
.col-md-9 {
    background-color: #f4f;
}

なぜこの流体容器は幅の100％にまたがっていないのですか？わずか1ピクセルですが、間違いなくページデザインが壊れてしまいます。

レクリエーションを発行する

この問題に関するリクエストに応じてjsfiddleを作成しました： http://jsfiddle.net/J6UE5

問題を再現するには、OS X 10.9.4を実行しているMacでSafari（7.0.5）を使用してビューポートのサイズを変更します。ピンクのコンテナの右側にある1pxの行がサイズ変更中に表示されたり消えたりするのに気付くでしょう。緑とピンクのコンテナが積み重ねられると（ブートストラップの動作）、1pxの行が消え、すべてが100％の幅になります。

csstwitter-bootstrapwidthcontainersfluid-layout
12
user3879583

.container要素は、Bootstrapに15pxのパディングを追加します。

.rowには、15pxの負の左マージンと右マージンがあります。

.columnには15pxのパディングがあります。

CSSでコンテナのパディング値をオーバーライドします（そして、それらが適切に上書きされるように、boostraprapコードの後に​​配置するようにしてください）。

.container { 
  padding: 0px;
}

コンテナ、コンテナ流体、行、および列の機能に関する詳細はこちら

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

15
ahnbizcad
 <div class="row" style="margin-left: -30px; padding: 0px;  background-color: rgba(255, 3, 53, 0.49);">
     <div class="col-lg-12">
           <p style="color: green;">Foo</p>
         </div>
</div>
1
Ray Sam

その問題を再現しようとしているように見えることはできません

bootstrap css、bootstrap.cssをbootstrap.min.cssに変更してみてください

編集：あなたが迅速に引っ張っている他のCSSファイルはありますか http://www.bootply.com/OOpfKfAAMh は正常に動作し、側面に1pxの空白がないことを示します

0
Bosc

この行をカスタムcssファイルに追加しましたか？

body {
       width: 100%;
       margin: 0%;    
}

/ **​​********************************************* ************************************** /

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Page title</title>
        <link rel="stylesheet" href="css/bootstrap.css"> <!-- Core CSS -->
        <link rel="stylesheet" href="css/test.css"> <!-- Custom CSS -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style type="text/css">
            .full-width {
                max-width:100%;
                top:0;
                left:0;
                min-height: 100%;
                min-width: 1024px;
                background-color: #808080;
            }
            .col-md-3 {
                background-color: #4f4;
            }
            .col-md-9 {
                background-color: #f4f;
            }

            body {
                width: 100%;
                margin: 0%;
            }
        }
    </style>

    </head>
    <body>
        <div class="full-width">This is not bootstrap</div>
        <div class="container-fluid">
            <div class="col-md-12">
            <div class="row">
                <div class="col-md-3">
                    This is Bootstrap
                </div>
                <div class="col-md-9">
                    This is Bootstrap too
                </div>
            </div>
        </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>
0
K.Raj.