使用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框架添加内容

回答

相关问题