Таблица начальной загрузки изменяет размер / реорганизует для col-sm - PullRequest
Новая
       5

Таблица начальной загрузки изменяет размер / реорганизует для col-sm

0 голосов
/ 17 января 2019

Я новичок в Bootstrap и таблицах, и у меня есть таблица, которую я использовал в качестве легенды для диаграммы: 

<div class="col-md-4 col-sm-12" id="chart1" style="display:none; border: 1px solid lightgray; padding-top:2%">
    <h3 style="text-align:center"><b>MY CHART</b></h3>
    <div id="chart" style="width:100%; min-height:500px"></div>
    <div id="myLegend" style="width:70%; height:40px;  margin: 0 auto;" class="row">
       <table style="font-size:18px; color:#545454">
          <tbody>
              <tr>
                 <td>
                    <div style="border:1px solid #ccc; padding: 1px">
                         <div style="width:4px; height:0; border: 5px solid rgb(145,207,80); overflow: hidden"></div>
                    </div>
                 </td>
                 <td>First Val</td>
                 <td>
                    <div style="border:1px solid #ccc; padding: 1px">
                         <div style="width:4px; height:0; border: 5px solid rgb(112,171,70); overflow: hidden"></div>
                    </div>
                </td>
                <td>Second Val</td>
                <td>
                    <div style="border:1px solid #ccc; padding: 1px">
                       <div style="width:4px; height:0; border: 5px solid rgb(255,191,0); overflow: hidden"></div>
                    </div>
                </td>
                <td>Third Val</td>
                <td>
                    <div style="border:1px solid #ccc; padding: 1px">
                         <div style="width:4px; height:0; border: 5px solid rgb(255,0,0); overflow: hidden"></div>
                    </div>
                </td>
                <td>Forth Val</td>
             </tr>
        </tbody>
      </table>
  </div>
</div>

На больших экранах легенда выглядит хорошо, но когда экран меньше, но все же больше, чем col-sm, таблица выходит за пределы div с идентификатором chart1, и мне нужно, чтобы он каким-то образом изменил размер / реорганизовал в две строки, чтобы соответствовать div , Я пытался использовать table-responsive, но он добавляет горизонтальную прокрутку, и это не хорошо. Можно ли подогнать содержимое таблицы при изменении размера экрана?

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Я построил это для вас здесь: https://codepen.io/anon/pen/PXvNvz

То, что вам не хватает, это класс таблицы: 

<table class="table"></table>

Я также переместил ваш класс строк, у которого был div myLegend, в верхнюю часть документа, так как он не выглядит так, как будто он вам нужен ниже

EDIT:

Я построил то, что, как мне кажется, вы пытаетесь сделать другим способом, который может быть лучше, вот как я бы поступил: https://codepen.io/anon/pen/jXorXQ?editors=1000

0 голосов
/ 17 января 2019

Вы можете сослаться на эти знания о системе координат.

Система сетки Bootstrap имеет четыре класса:
xs (для телефонов - экраны шириной менее 768 пикселей)
см (для планшетов - экраны шириной не менее 768 пикселей)
md (для маленьких ноутбуков - экраны шириной не менее 992 пикселей)
lg (для ноутбуков и настольных ПК - экраны шириной не менее 1200 пикселей)

Если вы хотите выполнить настройку, вы можете перезаписать X-процент в стандартном css-файле bootstrap.min.css

@ media (min-width: 992px) .col-md-4 {
ширина: X%; }

...