使twboot引導程序列的寬度變小

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

我真的盡了我所知。

我可以將小時裕度-左像素移動到不與打開和關閉文本重疊的位置。 但是，由於列太寬，因此結尾s或Sunday將再次中斷。

我還有其他一些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 col。

REF： 引導網格

離開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更加容易看到發生了什么。