引导网格

时间：2017-01-06 23:50:41

标签： html twitter-bootstrap grid-layout

我正在尝试在bootstrap中获取以下网格：

预期网格

enter image description here

我一直在阅读很多关于列和行的嵌套的内容，我正在这样做，但由于某种原因，右边的列是重叠的：

我的网格结果

enter image description here

将两个方块组合在一起组合按钮，将右边的东西组合成一个滑块。

这是给我结果的代码：

<div class="row margin-top-15">

    <div class="col-xs-9 divButton">

        <div class="row margin-top-15">

            <div class="col-xs-4 divButton">
                <button type="button" onclick="getCHfm()" id="fm1" class="btn btn-default custom"><b>1</b></button>
            </div>

            <div class="col-xs-4 divButton"></div>

            <div class="col-xs-4 divButton">
                <button type="button" id="off1" class="btn btn-warning custom"><b>2</b></button>
            </div>

        </div>

        <div class="row margin-top-15">

            <div class="col-xs-4 divButton">
                <button type="button" onclick="getCH1()" id="ch11" class="btn btn-default custom"><b>3</b></button>
            </div>

            <div class="col-xs-4 divButton">
                <button type="button" onclick="getCH2()" id="ch21" class="btn btn-default custom"><b>4</b></button>
            </div>

            <div class="col-xs-4 divButton">
                <button type="button" onclick="getCH3()" id="ch31" class="btn btn-default custom"><b>5</b></button>
            </div>
        </div>

        <div class="row margin-top-15">

            <div class="col-xs-4 divButton">
                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scanup1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b>6</b></span></div>
                <button type="button" id="scandown1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>

            <div class="col-xs-4 divButton">
                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="nextFolder" class="btn btn-default custom"><i class="icon wb-plus" aria-hidden="true"></i></button>
                <div class="text-center custom"><span><b>7</b></span></div>
                <button type="button" id="previousFolder" class="btn btn-default custom"><i class="icon wb-minus" aria-hidden="true"></i></button>
                </div>
            </div>

            <div class="col-xs-4 divButton">
                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="nextSong" class="btn btn-default custom"><i class="icon wb-plus" aria-hidden="true"></i></button>
                <div class="text-center custom"><span><b>8</b></span></div>
                <button type="button" id="previousSong" class="btn btn-default custom"><i class="icon wb-minus" aria-hidden="true"></i></button>
                </div>
            </div>
        </div>

        <div class="row margin-top-15">

            <div class="col-xs-4 divButton">

                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scr1up1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b>9</b></span></div>
                <button type="button" id="scr1down1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>

            <div class="col-xs-4 divButton">

                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scr2up1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b>10</b></span></div>
                <button type="button" id="scr2down1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>

            <div class="col-xs-4 divButton">

                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scr3up1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b>11</b></span></div>
                <button type="button" id="scr3down1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>

        </div>

    </div>

    <div class="col-xs-3 divButton">

        <div class="row margin-top-15">
            <div class="col-xs-12 divButton">
                <button type="button" id="on1" class="btn btn-danger custom"><b>12</b></button>
            </div>
        </div>

        <div class="row margin-top-15">
            <div class="col-xs-12 divButton">
                <input type="range" min="0" max="100" />
            </div>
        </div>
        <div class="row margin-top-15">
            <div class="col-xs-12 divButton">
                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scr4up1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b>14</b></span></div>
                <button type="button" id="scr4down1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>
        </div>

    </div>

    </div>

我的代码有问题吗？拜托，这个问题的一些指导会很棒！

1 个答案:

答案 0 :(得分：1)

我设法以这种方式获取HTML：

<div class="container">

        <div class="row margin-top-15">

    <div class="col-xs-9">

        <div class="row margin-top-15">

            <div class="col-xs-4 divButton">
                <button type="button" id="fm1" class="btn btn-default custom"><b></b></button>
            </div>

            <div class="col-xs-4 divButton"></div>

            <div class="col-xs-4 divButton">
                <button type="button" id="off1" class="btn btn-warning custom"><b></b></button>
            </div>

        </div>

        <div class="row margin-top-15">

            <div class="col-xs-4 divButton">
                <button type="button" id="ch11" class="btn btn-default custom"><b></b></button>
            </div>

            <div class="col-xs-4 divButton">
                <button type="button" id="ch21" class="btn btn-default custom"><b></b></button>
            </div>

            <div class="col-xs-4 divButton">
                <button type="button" id="ch31" class="btn btn-default custom"><b></b></button>
            </div>
        </div>

        <div class="row margin-top-15">

            <div class="col-xs-4 divButton">
                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scanup1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b></b></span></div>
                <button type="button" id="scandown1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>

            <div class="col-xs-4 divButton">
                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="nextFolder" class="btn btn-default custom"><i class="icon wb-plus" aria-hidden="true"></i></button>
                <div class="text-center custom"><span><b></b></span></div>
                <button type="button" id="previousFolder" class="btn btn-default custom"><i class="icon wb-minus" aria-hidden="true"></i></button>
                </div>
            </div>

            <div class="col-xs-4 divButton">
                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="nextSong" class="btn btn-default custom"><i class="icon wb-plus" aria-hidden="true"></i></button>
                <div class="text-center custom"><span><b></b></span></div>
                <button type="button" id="previousSong" class="btn btn-default custom"><i class="icon wb-minus" aria-hidden="true"></i></button>
                </div>
            </div>
        </div>

        <div class="row margin-top-15">

            <div class="col-xs-4 divButton">

                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scr1up1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b></b></span></div>
                <button type="button" id="scr1down1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>

            <div class="col-xs-4 divButton">

                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scr2up1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b></b></span></div>
                <button type="button" id="scr2down1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>

            <div class="col-xs-4 divButton">

                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scr3up1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b></b></span></div>
                <button type="button" id="scr3down1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>

        </div>

    </div>

    <div class="col-xs-3">

        <div class="row margin-top-15 divRow">
            <div class="col-xs-12 divButton">
                <button type="button" id="on1" class="btn btn-danger custom"><b></b></button>
            </div>
        </div>

        <div class="row margin-top-15 divRow2">
            <div class="col-xs-12 divButton">
                <div class="col-xs-7 divButton">
                    <p id="result"></p>
                </div>
                <div class="col-xs-1 divButton">
                    <!--<div id="volSlider" class="asRange" data-plugin="asRange" data-namespace="rangeUi" data-step="1" data-min="2" data-max="12" data-value="7"></div>-->
                <input id="volSlider" class="asrange" type="range" min="0" max="30"/>

                </div>

                <div class="col-xs-4 divButton">

                </div>
            </div>
        </div>
        <div class="row margin-top-15 divRow3" >
            <div class="col-xs-12 divButton">
                <div class="btn-group-vertical custom" aria-label="Vertical button group" role="group">
                <button type="button" id="scr4up1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-up" aria-hidden="true"></i></button>
                <div class="text-center custom"><span ><b></b></span></div>
                <button type="button" id="scr4down1" class="btn btn-round btn-default custom"><i class="icon wb-chevron-down" aria-hidden="true"></i></button>
                </div>
            </div>
        </div>

    </div>

    </div>


        </div>

我前一段时间做过，所以我真的不记得出了什么问题，但是我不得不在bootstrap的网格系统中玩很多。还有一点CSS调整。

网格现在看起来像这样： Table

相关问题
最新问题