使用Bootstrap框架添加內容

我一直在研究bootsrap，並從我的理解，我只需要包裝我的代碼與<div>各種類的元素。使用Bootstrap框架添加內容

我已經構建了一個網頁，現在想要使用Bootstrap爲移動設備優化它。

這裏是我的代碼的一部分：

<body onload="initializeCharts()"> 
    <div class = "container-fluid"> 
     <div class = "row"> 
      <div class = "col-lg-12"> 
       <div id = "header"> 
        Sales Statistics for 2015 -16 
       </div> 
      </div> 
     </div> 
     <div id = "page"> 
      <div class = "row"> 
       <div class = "col-lg-6"> 
        <div id = "quadrant1"> 
         <input type = "button" name = "zoomButton1" id = "zoomButton1" value = "Zoom" onclick = "zoomIn(this.id)" class = "zoomButtons" /> 
         <select name = "chartType" id = "chartType" onchange = "changeChartType()" class = "chartControllers"> 
          <option value = "nothingSelected">Select chart type</option> 
          <option value = "column2d">2D Column Chart</option> 
          <option value = "bar2d">2D Bar Chart</option> 
          <option value = "line">2D Line Chart</option> 
          <option value = "area2d">2D Area Chart</option> 
          <option value = "pie2d">2D Pie Chart</option> 
          <option value = "pareto2d">2D Pareto Chart</option> 
          <option value = "doughnut2d">2D Doughnut Chart</option> 
          <option value = "column3d">3D Column Chart</option> 
          <option value = "bar3d">3D Bar Chart</option> 
          <option value = "pie3d">3D Pie Chart</option> 
          <option value = "pareto3d">3D Pareto Chart</option> 
          <option value = "doughnut3d">3D Doughnut Chart</option> 
         </select> 
         <input type = "button" name = "chooseValuesButton" id = "chooseValuesButton" value = "Choose values" onclick = "displayChooseAlert()" 
         class = "chartControllers" /> 
         <input type = "button" name = "backButton1" id = "backButton1" value = "Go back" onclick = "goBack(this.id)" class = "backButtons" /> 
         <div id = "chartA"> 
         </div> 
        </div> 
       </div> 
       <div class = "col-lg-6"> 
        <div id = "quadrant2"> 
         <input type = "button" name = "zoomButton2" id = "zoomButton2" value = "Zoom" onclick = "zoomIn(this.id)" class = "zoomButtons" /> 
         <select name = "themeColor" id = "themeColor" onchange = "changeChartThemeColor()" class = "chartControllers"> 
          <option value = "nothingSelected" selected>Select color theme</option> 
          <option value = "#FFFF00">Yellow and White</option> 
          <option value = "#D80000">Red and White</option> 
          <option value = "#0000CC">Blue and White</option> 
          <option value = "#006600">Green and White</option> 
         </select> 
         <input type = "button" name = "backButton2" id = "backButton2" value = "Go back" onclick = "goBack(this.id)" class = "backButtons" /> 
         <div id = "chartB"> 
         </div> 
        </div> 
       </div> 
      </div>

當我在我的瀏覽器中運行這個，我看到列呈現在頁面的末端，而不是像我想要的一半列。當瀏覽器調整到移動大小時，我希望象限div能夠一個在另一個之下，但在桌面上，我希望象限div佔據屏幕寬度的一半。

我的代碼有什麼問題？

來源

2016-01-08 rhari

問題在於您設置的列的大小。

您正在使用在離開大視口時立即斷開的大列。 .col-lg-6應更改爲.col-md-6或.col-sm-6以便將這兩列保留一段時間。

使用.col-xs-6會創建「不可破解」列，因爲即使在移動設備上它也不會丟失。否則你的代碼似乎是好的，如果我正確地理解了這個問題，這就是你所要求的。糾正我，如果我錯了，並澄清你的問題一點！ :)

來源

2016-01-08 11:48:47 ProDexorite

對於正在使用的整個頁面，將'.container-fluid'更改爲'.container'或將流體容器內的內容包裝到普通容器中以保持其集中。 – ProDexorite

-1

Bootstrap文件添加到html文件以引導在php中使用strep。

<script src="filename.js"></script>

並添加特定文件添加到文件夾中。

來源

2016-01-08 11:49:58

使用Bootstrap框架添加內容

回答

相關問題