2
Я использую border-right для разделения столбцов в сетке Bootstrap. Но эта вертикальная линия (border-right) ломается, когда одна ячейка занимает больше высоты на меньшем экране. Поэтому, в основном, я хочу, чтобы все ячейки в строке занимали одну и ту же высоту. Вот пример моего размечать:Бутстрап-сетка с ответной высотой для строки
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<html>
\t <head>
\t \t <link type="text/css" rel="stylesheet" href="bootstrap.min.css"/>
\t \t <style>
\t \t \t div.col-xs-7, div.col-xs-1{
\t \t \t \t border-right:1px solid black;
\t \t \t }
\t \t \t div.row{
\t \t \t border-bottom: 1px solid black;
\t \t \t }
\t \t </style>
\t </head>
\t <body>
\t \t <div class = "content">
\t \t \t <div class="row">
\t \t \t \t <div class = "col-xs-7 col-md-5">Medical History Unknown</div>
\t \t \t \t <div class = "col-xs-1">y</div>
\t \t \t \t <div class = "col-xs-1">n</div>
\t \t \t \t <div class = "col-xs-1">y</div>
\t \t \t \t <div class = "col-xs-1">n</div>
\t \t \t </div>
\t \t \t <div class="row">
\t \t \t \t <div class = "col-xs-7 col-md-5">Heart Condition (CHF, Angina, Heart Attack) </div>
\t \t \t \t <div class = "col-xs-1">y</div>
\t \t \t \t <div class = "col-xs-1">y</div>
\t \t \t \t <div class = "col-xs-1">y</div>
\t \t \t \t <div class = "col-xs-1">y</div>
\t \t \t </div>
\t \t \t <div class="row">
\t \t \t \t <div class = "col-xs-7 col-md-5">Anemia</div>
\t \t \t \t <div class = "col-xs-1">n</div>
\t \t \t \t <div class = "col-xs-1">y</div>
\t \t \t \t <div class = "col-xs-1">n</div>
\t \t \t \t <div class = "col-xs-1">y</div>
\t \t \t </div>
\t \t \t <div class="row">
\t \t \t \t <div class = "col-xs-7 col-md-5">Epilepsy, Seizure </div>
\t \t \t \t <div class = "col-xs-1">y</div>
\t \t \t \t <div class = "col-xs-1">y</div>
\t \t \t \t <div class = "col-xs-1">n</div>
\t \t \t \t <div class = "col-xs-1">n</div>
\t \t \t </div>
\t \t </div>
\t </body>
</html>Примечание: Это разбивает на маленьком экране
Upvoted для (будучи правильно и) помнящие таблицы прекрасно подходят для табличных данных, просто не макет! – Octopoid
Но, столы не реагируют, не так ли? но мне нужна отзывчивость. . Должен ли я использовать ширину% для столбцов или любой другой способ? –
Да, сделайте таблицу шириной 100% ее контейнера, и она будет масштабироваться соответствующим образом. Таблицу можно использовать на чутких веб-сайтах. – gewh