Question

HTML

<title>Bootstrap 101 Template</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>

<div class="navbar navbar-inverse navbar-static-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Tournament</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="container">
        <div class="tournament">
            <div class="round-1">
                <div class="game">
                    <div class="contender-1">
                        P1
                    </div>
                    <div class="contender-2">
                        P2
                    </div>
                </div>
                <div class="game">
                    <div class="contender-1">
                        P3
                    </div>
                    <div class="contender-2">
                        P4
                    </div>
                </div>
                <div class="line">
                </div>
            </div>
        </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

CSS

.contender-1,
.contender-2 {
font-family: Arial, sans-serif;
font-size: 12px;
width: 120px;
border: 1px solid #000;
padding-left: 2px;
background-color: #f1f1f1;
 }

 .contender-1 {
border-bottom: 0px;
}

 .game {
margin-bottom: 16px;
}

.line {
float: left;
background-color: red;
height: 10px;
width: 210px;
border-bottom: 1px solid #000;
}

线类位于游戏div下方，而不是紧挨着它。

我不知道造成这种情况的原因。它是导致问题的bootstrap css吗？我没碰过它。我想，忽略所有其他div和诸如游戏和线条的东西。

或者是否有更好的解决方案来创建开箱即用的线路？我正在创建一个锦标赛页面，所以我需要连接括号的线条。我希望你理解我的帖子。我需要两个盒子两边的线条。

编辑：关闭bootstrap css不会改变任何东西。这里发生了什么？

素描：http://i.imgur.com/lya2htS.png

Answer 1

通常，您会将内容放在引导网格中。例如，如果您想要两列网格。你可以在这里看到他们是如何做到的：http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

如果您不想使用此网格并希望达到您所追求的效果。你需要将游戏容器浮动到左边。否则，游戏容器将占用其父容器或主体的整个宽度，并将线容器向下推。

.game {
  margin-bottom: 16px;
  float: left;
}

在这里看到js小提琴：http://jsfiddle.net/sc8EJ/5/

漂浮不起作用

1 个答案: