web-dev-qa-db-ja.com

Bootstrap行幅

私は次のHTMLを持っています：

<!DOCTYPE HTML>
<html>

<head>
    <link rel="stylesheet" href="STYLE.css">
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>

<body>
    <header class="row"></header>

    <section class="row section1"></section>
    <section class="row section2"></section>
    <section class="row section1"></section>
    <section class="row section2"></section>
    <section class="row section1"></section>

    <footer class="row"></footer>
</body>

</html>

何らかの理由で、Webページ全体がブラウザウィンドウよりも広くなっています。 rowクラスを削除すると、すべてが正常に戻ります。ローカルCSSファイルはこの問題とは何の関係もありません。私の推測では、bootstrap CSSは、何らかの理由で行を広くするように変更します。そこで、これを修正するアイデアがあるかどうかを尋ねたいと思いました。

csstwitter-bootstrapwidthrow
5
Adrian Devder

.containerクラスまたは.container-fluidのいずれかを使用できます。 .containerは、実際の画面からある程度のマージンスペースを維持し、ページビューを拡大しません。一方、.container-fluidは、可能な限りページを拡大します。以下で変更されたhtmlスクリプトを参照してください。

<!DOCTYPE HTML>
<html>

<head>
    <link rel="stylesheet" href="STYLE.css">
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>

<body>
<div class="container">
    <header class="row"></header>
    <section class="row section1"></section>
    <section class="row section2"></section>
    <section class="row section1"></section>
    <section class="row section2"></section>
    <section class="row section1"></section>

    <footer class="row"></footer>
</div>
</body>

</html>

また、.col-md-6のようなクラスを使用して、mdをlgとsmに置き換えることができる行内のセクションの幅を指定する必要があります。

mdは中型デバイスラップトップ、デスクトップなどの略です。

lgは大型デバイスプロジェクターやいくつかの大型スクリーンなどの略です。

smは小型デバイス携帯電話などの略です。

これら3つの組み合わせを自由に使用できます。例えば、

<div class="container-fluid">
    <div class="row">
       <div class="col-md-6 col-sm-1 col-lg-12">

       </div>
    </div>
</div>

それがあなたが始めてあなたの問題を解決するのを助けることを願っています。

8
Vinay Prajapati

この問題を修正するには、クラスrowを適切に使用する必要があります。

クラスrowをクラスcontainerでラップしていません。

ブートストラップは グリッドシステム を提供します。

Bootstrapのグリッドシステムでは、ページ全体で最大12列を使用できます。ページ幅をその12列に配置する必要があります。

ここですべてを説明することはできません。以下のリンクを参照してください。

ブートストラップグリッドテンプレート

ブートストラップグリッド

5
WisdmLabs

bootstrap .containerクラスでラップして、問題が解決しないかどうかを確認してください。

<body>
<div class="container">
  //your content goes here
</div>
</body>
0
Aritro Sen

bootstrap 4を使用している場合は、他のdivでラップするのではなく、行にm-0クラスを追加するだけです。マージンが削除されます。

0
sreeya chowdary

たぶんあなたはbootstrap cssのグリッドを追加する必要がありますか？

この例を見てください

http://getbootstrap.com/examples/grid/

0
Sjoerd Valk

bootstrap機能のいずれかを使用するには、コンテナーを使用する必要があります。これは、設定された幅のコンテナーまたは流動的なコンテナーにすることができますが、コンテナーを追加すると問題が解決します。また、スタイルを切り替えて、作業を使用します。 CDNバージョンとJavascriptを推奨される場所に移動しました。これがより良い出発点であることがわかるかもしれません。

参照： http://getbootstrap.com/css/#overview-container および http://getbootstrap.com/css/#grid

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid">
        <header class="row">Test 1</header>

        <section class="row section1">Test 2</section>
        <section class="row section2">Test 3</section>
        <section class="row section1">Test 4</section>
        <section class="row section2">Test 5</section>
        <section class="row section1">Test 6</section>

        <footer class="row">Test 7</footer>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
0
Daniel Tung