Question

好吧，我花了好几个小时试图让这些课程像我需要的那样进行操作。

但是，列之间的空间太大了。

这是我到目前为止所拥有的。 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

我真的尝试过我所知道的一切。

我可以将小时margin -left像素移动到不与打开和关闭文本重叠。然而，由于列太宽，结尾或星期日将会中断。

我还有其他一些css：

.hours_bg {
background: #fff;

}
.hours_div {
margin-left: -50px;
width: 100%;
}

Answer 1

row必须在container级别内。

然后将此row分为12个段col完成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个总数。

参考：Bootstrap Grid

离开div，或许桌子会更合适？＆gt;

<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的静态内容，它更容易看到发生了什么..

使twitter bootstrap列宽度更小

1 个答案: