уменьшить ширину загрузочных столбцов twiiter
Хорошо, я потратил часы на это, пытаясь заставить классы манипулировать так, как мне нужно.
Тем не менее, столбцы дают слишком много места между днями.
Вот что я имею до сих пор. http://tinypic.com/r/2hx0jnp/8
<div class="row hours_bg">
<h4>Hours</h4>
<div class="col-xs-2">
<br />
Open
<br />
<br />
Close
</div>
<div class="col-xs-10 hours_div">
<?php foreach($days as $day):
$daylow = strtolower($day);
?>
<div class="col-xs-6 col-xs-1">
<div class="row">
<div class="col-xs-6 col-xs-3"><?php echo $day[0]; ?></div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-3">
<span id="pre_open_<?php echo $daylow ?>">
<?php echo isset($location['open_' . $daylow]) ? $location['open_' . $daylow] : '' ?>
</span> <br />
<span id="pre_close_<?php echo $daylow ?>">
<?php echo isset($location['close_' . $daylow]) ? $location['close_' . $daylow] : '' ?>
</span>
</div>
<br />
</div><!-- row -->
</div>
<?php endforeach; ?>
</div>
<div class="clearfix"></div>
Это результат, который мне нужен: http://tinypic.com/r/2ikeaee/8
Я действительно перепробовал все, что знаю.
Я могу переместить пиксели с полями в часах, чтобы не перекрывать открытый и закрытый текст. Однако снова окончание s или воскресенье будет отрезано, потому что столбцы слишком широки.
У меня есть некоторые другие CSS:
.hours_bg {
background: #fff;
}
.hours_div {
margin-left: -50px;
width: 100%;
}
Решение
row должен быть в пределах container учебный класс.
это row Затем разбивается на 12 сегментов кол После того, как вы закончите каждый сегмент 12 cols вы должны создать новый row,
Ваш код должен быть похож на это, хотя я не проверял его:
<div class="container">
<div class="row">
<h4 class='hours_bg'>Hours</h4>
<div class="col-xs-2">
<br />
Open
<br />
<br />
Close
</div>
<div class="col-xs-10 hours_div">
<?php foreach($days as $day):
$daylow = strtolower($day);
?>
<div class="row">
<div class="col-xs-6 col-xs-3"><?php echo $day[0]; ?></div>
<div class="col-xs-6 col-xs-3">
<span id="pre_open_<?php echo $daylow ?>">
<?php echo isset($location['open_' . $daylow]) ? $location['open_' . $daylow] : '' ?>
</span> <br />
<span id="pre_close_<?php echo $daylow ?>">
<?php echo isset($location['close_' . $daylow]) ? $location['close_' . $daylow] : '' ?>
</span>
</div>
<br />
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<div class="clearfix"></div>
Обратите внимание, что каждая строка будет содержать всего 12 кол.
REF: Bootstrap Grid
Отойдя от div, возможно, стол будет более подходящим?>
<table class="table">
<thead>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
</thead>
<tbody>
<tr>
<td>OPEN</td>
<td>9AM</td>
<td>9AM</td>
<td>9AM</td>
<td>9AM</td>
<td>9AM</td>
<td>9AM</td>
<td>9AM</td>
</tr>
<tr>
<td>CLOSE</td>
<td>9AM</td>
<td>9AM</td>
<td>9AM</td>
<td>9AM</td>
<td>9AM</td>
<td>9AM</td>
<td>9AM</td>
</tr>
</tbody>
</table>
Как вы можете видеть здесь JSFiddle со статическим контентом гораздо легче увидеть, что происходит ..
Другие решения
Других решений пока нет …