Question

我试图用HTML做一个锦标赛表，并考虑使用Bootstrap网格元素，这是我到底有多远。

我无法添加我已完成的图片（代表太低），因此我会添加一个链接 http://imgur.com/782E8cd

目前我有两个问题：

1）注意第三行，MAINCOL已经移动了一点，无法找出原因。正如您所看到的，WB2也处于不正确的位置。 - 解决了

2）如何在第2行（正好在WB1或LB1下）为空元素创建边框。现在我创建了一个相同的div元素，添加了文本＆＃34; BYE＆＃34;并将颜色更改为白色，以应用边框

以下是div的

<div class="container">
    <!-- 1 -->
    <div class="row">
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 stripeBOT colmaker nobr">LB1</div>
        <div class="col-xs-1 stripeBOT stripeDOWN stripeUP stripeTOP colmaker nobr">MAINCOL</div>
        <div class="col-xs-1 stripeBOT colmaker nobr">WB1</div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>

    </div>
    <!-- 2 -->
    <div class="row">
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker stripeUP whitetext">BYE</div>
        <div class="col-xs-1 stripeBOT stripeDOWN stripeUP colmaker nobr">MAINCOL</div>
        <div class="col-xs-1 colmaker stripeDOWN whitetext">BYE</div>
        <div class="col-xs-1 stripeBOT colmaker nobr">VF1</div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
    </div>
    <!-- 3 -->
    <div class="row">
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 stripeBOT stripeUP nobr">LB2</div>
        <div class="col-xs-1 stripeBOT stripeDOWN stripeUP colmaker nobr">MAINCOL</div>
        <div class="col-xs-1 stripeBOT stripeDOWN nobr">WB2</div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>   
    </div>
    <!-- 4 -->
    <div class="row">
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 stripeBOT stripeDOWN stripeUP colmaker nobr">MAINCOL</div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
    </div>
    <!-- 5 -->
    <div class="row">
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 stripeBOT stripeDOWN stripeUP colmaker nobr">MAINCOL</div>
        <div class="col-xs-1 stripeBOT colmaker nobr">WB3</div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
    </div>
    <!-- 6 -->
    <div class="row">
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 stripeBOT stripeDOWN stripeUP colmaker nobr">MAINCOL</div>
        <div class="col-xs-1 colmaker stripeDOWN whitetext">BYE</div>
        <div class="col-xs-1 stripeBOT colmaker nobr">VF2</div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
    </div>
    <!-- 7 -->
    <div class="row">
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 stripeBOT stripeDOWN stripeUP colmaker nobr">MAINCOL</div>
        <div class="col-xs-1 stripeBOT colmaker nobr stripeDOWN">WB4</div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
    </div>
    <!-- 8 -->
    <div class="row">
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 stripeBOT stripeDOWN stripeUP colmaker nobr">MAINCOL</div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
    </div>
    <!-- 9 -->
    <div class="row">
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 stripeBOT stripeDOWN stripeUP colmaker nobr">MAINCOL</div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
    </div>
    <!-- 10 -->
    <div class="row">
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 stripeBOT stripeDOWN stripeUP colmaker nobr">MAINCOL</div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
    </div>
    <!-- 11 -->
    <div class="row">
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 stripeBOT stripeDOWN stripeUP colmaker nobr">MAINCOL</div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
    </div>
    <!-- 12 -->
    <div class="row">
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 stripeBOT stripeDOWN stripeUP colmaker nobr">MAINCOL</div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
    </div>
    <!-- 13 -->
    <div class="row">
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 stripeBOT stripeDOWN stripeUP colmaker nobr">MAINCOL</div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
    </div>
    <!-- 14 -->
    <div class="row">
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 stripeBOT stripeDOWN stripeUP colmaker nobr">MAINCOL</div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
    </div>
    <!-- 15 -->
    <div class="row">
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 stripeBOT stripeDOWN stripeUP colmaker nobr">MAINCOL</div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
    </div>
    <!-- 16 -->
    <div class="row">
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 stripeBOT stripeDOWN stripeUP colmaker nobr">MAINCOL</div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
        <div class="col-xs-1 colmaker"></div>
    </div>

这里是CSS（Bootstrap col-xs-1没有从这里添加）

 .stripeUP{
     border-left: 1px solid #000;
 }

 .stripeDOWN{
     border-right: 1px solid #000;
 }

 .stripeTOP{
     border-top: 1px solid #000;
 }

 .spacer{
     margin-top: 10px;
 }

 .colmaker{
     margin-right: 1px;
 }
.nobr { 
    white-space: nowrap;

}
.whitetext{
    color: white;
}

Answer 1

尝试从你的css中删除它：

.colmaker{
  margin-right: 1px;
 }

Answer 2

如果您在LB1 div上发现了

<div class="col-xs-1 stripeBOT colmaker nobr">LB1</div>

在你的LB2 div上你有

<div class="col-xs-1 stripeBOT stripeUP nobr">LB2</div>

因此，将类colmaker添加到LB2 div

<div class="col-xs-1 stripeBOT colmaker stripeUP nobr">LB2</div>

Answer 3

尝试这一个，只是在CSS中做了一些改变

http://www.bootply.com/9RLR3by3F7

Answer 4

我认为你采取了wronk方法。

如果我是你，我会使用table：

＆＃13;

table {
	border-collapse: collapse;
	border-spacing: 0;
    width: 500px;
}

td{
    width: 100px;
    height: 25px;
    text-align: center;
}

.stripeUP{
     border-left: 1px solid #000;
 }

 .stripeDOWN{
     border-right: 1px solid #000;
 }

 .stripeTOP{
     border-top: 1px solid #000;
 }

 .stripeBOTTOM{
     border-bottom: 1px solid #000;
 }

.stripe{
     border: 1px solid #000;
 }

＆＃13;

<table>
    <tr>
        <td></td>
        <td>LB1</td>
        <td class="stripe">MAINCOL</td>
        <td>WB1</td>
        <td></td>
    </tr>
    <tr>
        <td class="stripeBOTTOM"></td>
        <td class="stripeUP stripeTOP"></td>
        <td class="stripe">MAINCOL</td>
        <td class="stripeDOWN stripeTOP"></td>
        <td class="stripeBOTTOM">VF1</td>
    </tr>
    <tr>
        <td></td>
        <td class="stripeUP stripeBOTTOM">LB2</td>
        <td class="stripe">MAINCOL</td>
        <td class="stripeDOWN stripeBOTTOM">WB2</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td class="stripe">MAINCOL</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>LB3</td>
        <td class="stripe">MAINCOL</td>
        <td>WB3</td>
        <td></td>
    </tr>
    <tr>
        <td class="stripeBOTTOM"></td>
        <td class="stripeUP stripeTOP"></td>
        <td class="stripe">MAINCOL</td>
        <td class="stripeDOWN stripeTOP"></td>
        <td class="stripeBOTTOM">VF2</td>
    </tr>
    <tr>
        <td></td>
        <td class="stripeUP stripeBOTTOM">LB4</td>
        <td class="stripe">MAINCOL</td>
        <td class="stripeDOWN stripeBOTTOM">WB4</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td class="stripe">MAINCOL</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td class="stripe">MAINCOL</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td class="stripe">MAINCOL</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td class="stripe">MAINCOL</td>
        <td></td>
        <td></td>
    </tr>
</table>

＆＃13;

Answer 5

Imho，错误的做法，因为这是一种不好的做法。

如果你想要一张桌子，请使用bootstraps table css - ＆gt; http://getbootstrap.com/css/#tables 一些小教程 - ＆gt; http://www.w3schools.com/bootstrap/bootstrap_tables.asp

除非你知道自己在做什么，否则永远不要改变bootstrap元素上的边距/填充（尤其是容器/行/ col等主要元素），否则会破坏所有内容。

不要忘记关闭你的容器，否则一切都会崩溃。

Div元素随机改变位置

5 个答案: