Добавление содержимого с помощью рамки 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>

Когда я запускаю это в моем браузере, я вижу, что столбцы делают на концах страницы, а не как полуколонн, что я хочу. Когда размер браузера изменен до размера мобильного устройства, я хочу, чтобы квадрантные divs приходили один под другим, но на десктопах. Я хочу, чтобы квадрантные divs занимали половину ширины экрана.

Что не так с моим кодом?

источник

2016-01-08 rhari

Проблема заключается в размере ваших колонок, которые вы установили.

Вы используете большой столбец, который немедленно разбивается, когда вы покидаете большой видовой экран. .col-lg-6 следует изменить на .col-md-6 или .col-sm-6, чтобы сохранить эти два столбца на некоторое время.

Использование .col-xs-6 создает столбец «unbreakable», так как он не падает даже на мобильное устройство. В противном случае ваш код будет в порядке, и если я правильно понял вопрос, это то, о чем вы просите. Исправьте меня, если я ошибаюсь и немного уточню ваш вопрос! :)

источник

2016-01-08 11:48:47 ProDexorite

И для использования всей страницы, замените '.container-fluid' на' .container' или оберните содержимое внутри контейнера для жидкости в обычный контейнер, чтобы сохранить его как централизованный. – ProDexorite

-1

Загрузочный файл добавить в html-файл для загрузки стрептокоманды в php.

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

И добавить файл в папку.

источник

2016-01-08 11:49:58

Добавление содержимого с помощью рамки Bootstrap

ответ

Смежные вопросы