1. 首頁
  2. 問答
  3. 重疊列

重疊列

2017-01-06 75 views
0

我試圖讓在引導下面的網格：重疊列

意格

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>

有什麼錯我的代碼？請在這個問題上提供一些指導意見！

來源

2017-01-06 Luz A

+0

確保您添加一個外部容器爲你的行和你的CSS規則沒有影響的行和列的利潤率。 「行必須放在'.container'（固定寬度）或'.container-fluid'（全寬度）內，以便正確對齊和填充。」 http://getbootstrap.com/css/#grid –

+0

是的，所有的代碼都在一個容器中，當問這個問題時我省略了那個部分。關於CSS部分，什麼樣的事情會影響我的利潤率？我有一個名爲「custom」的按鈕的類，它只是說：width：100％！important; –

+2

我建議您創建一個小提琴，以便其他人可以識別問題並快速回答您的問題：https：//jsfiddle.net/ –

回答

0

我設法得到正確的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>

我做到了，前一段時間，所以我真的不記得什麼是錯的，但我不得不打了很多與電網系統的引導。還有一點與CSS調整。

網格現在看起來是這樣的： Table

來源

2017-02-01 02:11:19

相關問題

 相關問題