0

これらの列クラスが正しく動作しない理由がわかりません。それらは垂直に積み重ねられています。私はブーストラップにかなり慣れていないので、明らかな何かを見落としている可能性があります。

どんな助けでも大歓迎です。ありがとうございます。

HTML-

<div class="row content-container">
        <div class="row top-nav">
            <div class="row header">
                <div class="col-lg-4 logo">
                    <img src="images/logo.png">
                </div>
                <div class="col-lg-8 nav-area">
                    <div class="row number">
                        888.888.8888
                    </div>
                    <div class="row navigation">

                    </div>
                    <div class="row heading">

                    </div>
                </div>
            </div>
            <div class="row sub-nav">
            </div>
        </div>  
        <div class="row content-footer"></div>
    </div>

SCSS-

.content-container{
        position: relative;
        background-image:url("images/border-vertical.png"), url("images/parchment-bg.jpg"), url("images/border-vertical.png");
        background-position: top left, top center, top right;
        background-origin: border-box, content-box, border-box;
        background-repeat: repeat-y, repeat-y, repeat-y;
        height: 1500px;
        width: 972px;
        margin: auto;
        padding: 20px 56px 0 56px;

        .nav-area{
            position: relative;

            .number{
                background-image:url("images/phone-number-bg.png")
            }
        }

        .content-footer{
            background-image: url("images/border-horizontal.png");
            background-repeat: repeat-x;
            background-origin:content-box;
            height: 31px;
            width: 892px;
            position: absolute;
            bottom: 0px;
            left: 40px;
        }

    }
4

1 に答える 1

2

まず、col-lg-* を含むすべての div にクラス行を配置する必要はありません

ただし、必要に応じてそれらを積み重ねることができます。例 ：

<div class="row">
    <div class="col-lg-12">
        <div class="row">
            <div class="col-lg-4">
                ...
            </div>
        </div>
    </div>
</div>

あなたの問題に関しては、col-lg-* の最小幅に達したときに列が分割されたことは正しかったです。これはブートストラップの機能です。これにより、列が縮小して読めなくなるのを防ぐことができます。

ただし、小さなビュー用にグリッド クラスを追加することもできます。このような：

        <div class="row header">
            <div class="col-md-4 col-lg-4 logo">
                <img src="images/logo.png">
            </div>
            <div class="col-md-8 col-lg-8 nav-area">
                <div class="row number">
                    888.888.8888
                </div>
                <div class="row navigation">

                </div>
                <div class="row heading">

                </div>
            </div>
        </div>
于 2014-02-09T14:01:24.450 に答える