Html 引导代码不工作：行和行；Col，垂直显示的复选框
尝试将32个复选框与4行中的标签对齐。它目前正在垂直堆叠所有32个。我已经根据其他示例对代码进行了建模，但无论我做什么，仍然得到相同的结果。不确定是我的html还是css 以下是一个JS Bin链接： 这是我的html：Html 引导代码不工作：行和行；Col，垂直显示的复选框,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,尝试将32个复选框与4行中的标签对齐。它目前正在垂直堆叠所有32个。我已经根据其他示例对代码进行了建模，但无论我做什么，仍然得到相同的结果。不确定是我的html还是css 以下是一个JS Bin链接： 这是我的html： <!doctype html> <html> <head> <meta charset="utf-8"> <script src="https://code.jq
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link id="ppstyle" rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body onLoad="onLoaded()">
<div class="container">
<section class="panel" id="data">
<div id="dataSelection">
<div class="container" id="allTeams">
<div class="row">
<div class="col-md-12"><input class="radio_checkbox" id="allTeams" type="checkbox" name="allTeams">All Teams</div>
</div>
</div>
<div class="container" id="singleTeams1">
<div class="row">
<div class="col-md-3 centered"><input class="radio_checkbox" value="3800" type="checkbox" name="allTeams">ARI</div>
<div class="col-md-3 centered"><input class="radio_checkbox" value="0200" type="checkbox" name="allTeams">ATL</div>
<div class="col-md-3 centered"><input class="radio_checkbox" value="0325" type="checkbox" name="allTeams">BAL</div>
<div class="col-md-3 centered"><input class="radio_checkbox" value="0610" type="checkbox" name="allTeams">BUF</div>
</div>
</div>
<div class="container" id="singleTeams2">
<div class="row">
<div class="col-md-3"><input class="radio_checkbox" value="0750" type="checkbox" name="allTeams">CAR</div>
<div class="col-md-3"><input class="radio_checkbox" value="0810" type="checkbox" name="allTeams">CHI</div>
<div class="col-md-3"><input class="radio_checkbox" value="0920" type="checkbox" name="allTeams">CIN</div>
<div class="col-md-3"><input class="radio_checkbox" value="1050" type="checkbox" name="allTeams">CLE</div>
<div class="col-md-3"><input class="radio_checkbox" value="1200" type="checkbox" name="allTeams">DAL</div>
<div class="col-md-3"><input class="radio_checkbox" value="1400" type="checkbox" name="allTeams">DEN</div>
<div class="col-md-3"><input class="radio_checkbox" value="1540" type="checkbox" name="allTeams">DET</div>
<div class="col-md-3"><input class="radio_checkbox" value="1800" type="checkbox" name="allTeams">GB</div>
<div class="col-md-3"><input class="radio_checkbox" value="2120" type="checkbox" name="allTeams">HOU</div>
<div class="col-md-3"><input class="radio_checkbox" value="2200" type="checkbox" name="allTeams">IND</div>
<div class="col-md-3"><input class="radio_checkbox" value="2250" type="checkbox" name="allTeams">JAX</div>
<div class="col-md-3"><input class="radio_checkbox" value="2310" type="checkbox" name="allTeams">KC</div>
<div class="col-md-3"><input class="radio_checkbox" value="2510" type="checkbox" name="allTeams">LA</div>
<div class="col-md-3"><input class="radio_checkbox" value="4400" type="checkbox" name="allTeams">LAC</div>
<div class="col-md-3"><input class="radio_checkbox" value="2700" type="checkbox" name="allTeams">MIA</div>
<div class="col-md-3"><input class="radio_checkbox" value="3000" type="checkbox" name="allTeams">MIN</div>
<div class="col-md-3"><input class="radio_checkbox" value="3200" type="checkbox" name="allTeams">NE</div>
<div class="col-md-3"><input class="radio_checkbox" value="3300" type="checkbox" name="allTeams">NO</div>
<div class="col-md-3"><input class="radio_checkbox" value="3410" type="checkbox" name="allTeams">NYG</div>
<div class="col-md-3"><input class="radio_checkbox" value="3430" type="checkbox" name="allTeams">NYJ</div>
<div class="col-md-3"><input class="radio_checkbox" value="2520" type="checkbox" name="allTeams">OAK</div>
<div class="col-md-3"><input class="radio_checkbox" value="3700" type="checkbox" name="allTeams">PHI</div>
<div class="col-md-3"><input class="radio_checkbox" value="3900" type="checkbox" name="allTeams">PIT</div>
<div class="col-md-3"><input class="radio_checkbox" value="4600" type="checkbox" name="allTeams">SEA</div>
<div class="col-md-3"><input class="radio_checkbox" value="4500" type="checkbox" name="allTeams">SF</div>
<div class="col-md-3"><input class="radio_checkbox" value="4900" type="checkbox" name="allTeams">TB</div>
<div class="col-md-3"><input class="radio_checkbox" value="2100" type="checkbox" name="allTeams">TEN</div>
<div class="col-md-3"><input class="radio_checkbox" value="5110" type="checkbox" name="allTeams">WAS</div>
</div><!-- end single teams row -->
</div><!-- end single teams container -->
</div><!-- end dataSelection -->
</section><!-- end panel: data -->
</div><!-- end container -->
</body>
</html>
<script src="./lib/jquery-3.2.1.js"></script>
<script src="./js/ext.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link id="ppstyle" rel="stylesheet" type="text/css" href="css/style.css">
您需要将四人一组放入行中：
<div class="row">
<div class="col-md-3"><input class="radio_checkbox" value="0750" type="checkbox" name="allTeams">CAR</div>
<div class="col-md-3"><input class="radio_checkbox" value="0810" type="checkbox" name="allTeams">CHI</div>
<div class="col-md-3"><input class="radio_checkbox" value="0920" type="checkbox" name="allTeams">CIN</div>
<div class="col-md-3"><input class="radio_checkbox" value="1050" type="checkbox" name="allTeams">CLE</div>
</div>
<div class="row">
<div class="col-md-3"><input class="radio_checkbox" value="0750" type="checkbox" name="allTeams">CAR</div>
<div class="col-md-3"><input class="radio_checkbox" value="0810" type="checkbox" name="allTeams">CHI</div>
<div class="col-md-3"><input class="radio_checkbox" value="0920" type="checkbox" name="allTeams">CIN</div>
<div class="col-md-3"><input class="radio_checkbox" value="1050" type="checkbox" name="allTeams">CLE</div>
</div>
etc....
汽车
芝加哥
CIN
克莱
汽车
芝加哥
CIN
克莱
等
<div class="row">
<div class="col-md-3"><input class="radio_checkbox" value="0750" type="checkbox" name="allTeams">CAR</div>
<div class="col-md-3"><input class="radio_checkbox" value="0810" type="checkbox" name="allTeams">CHI</div>
<div class="col-md-3"><input class="radio_checkbox" value="0920" type="checkbox" name="allTeams">CIN</div>
<div class="col-md-3"><input class="radio_checkbox" value="1050" type="checkbox" name="allTeams">CLE</div>
</div>
<div class="row">
<div class="col-md-3"><input class="radio_checkbox" value="0750" type="checkbox" name="allTeams">CAR</div>
<div class="col-md-3"><input class="radio_checkbox" value="0810" type="checkbox" name="allTeams">CHI</div>
<div class="col-md-3"><input class="radio_checkbox" value="0920" type="checkbox" name="allTeams">CIN</div>
<div class="col-md-3"><input class="radio_checkbox" value="1050" type="checkbox" name="allTeams">CLE</div>
</div>
etc....
汽车
芝加哥
CIN
克莱
汽车
芝加哥
CIN
克莱
等
表单元格.container.container{
display: table-cell;
}
.container{
显示：表格单元格；
}
* {
填充：0；
保证金：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
}
身体{
字体大小：100%；
字号：200；
字母间距：.07em；
颜色：#7575；
背景色：#262626；
}
.小组{
填充：1em；
保证金：0自动；
边缘底部：5px；
宽度：260px；
边框样式：实心；
边框宽度：1px；
边框颜色：#333333；1F
背景色：#292929；
}
.radio_复选框{右边空白：10px！重要；}
div{
/*文本对齐：左对齐*/
边缘底部：5px；
}
.居中{
边框：实心；
边框颜色：#fff；
边框宽度：1px；
文本对齐：居中；
}
所有团队
阿里
ATL
巴尔
缓冲器
汽车
芝加哥
CIN
克莱
达尔
兽穴
详细资料
国标
侯
IND
JAX
KC
洛杉矶
紫胶
米娅
闵
氖
不
纽约市
纽约
橡树
PHI
矿井
大海
旧金山
结核病
十
是
表单元格.container.container{
display: table-cell;
}
.container{
显示：表格单元格；
}
* {
填充：0；
保证金：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
}
身体{
字体大小：100%；
字号：200；
字母间距：.07em；
颜色：#7575；
背景色：#262626；
}
.小组{
填充：1em；
保证金：0自动；
边缘底部：5px；
宽度：260px；
边框样式：实心；
边框宽度：1px；
边框颜色：#333333；1F
背景色：#292929；
}
.radio_复选框{右边空白：10px！重要；}
div{
/*文本对齐：左对齐*/
边缘底部：5px；
}
.居中{
边框：实心；
边框颜色：#fff；
边框宽度：1px；
文本对齐：居中；
}
所有团队
阿里
ATL
巴尔
缓冲器
汽车
芝加哥
CIN
克莱
达尔
兽穴
详细资料
国标
侯
IND
JAX
KC
洛杉矶
紫胶
米娅
闵
氖
不
纽约市
纽约
橡树
PHI
矿井
大海
旧金山
结核病
十
是
此外，我对您的代码做了一些更改，以便更接近引导标准。希望它能帮助
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<style>
* {
padding:0;
margin:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
body {
font-size: 100%;
font-weight: 200;
letter-spacing: .07em;
color: #757575;
background-color:#262626;
}
.container {
width: 260px;
}
.panel {
padding: 1em;
margin: 0 auto 5px;
border: 1px solid #333333;
background-color:#292929;
}
.block-checkboxes {
text-align: center;
}
.block-checkboxes > div,
.centered > div,
#allTeams {
margin-bottom: 5px;
}
.block-checkboxes input {
display: block;
margin: 0 auto;
}
.centered label {
border: solid 1px #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<section class="panel" id="data">
<div class="row">
<div class="col-md-12" id="allTeams">
<label><input type="checkbox" name="all-teams">All Teams</label>
</div>
</div>
<!-- If you want radio buttons set type="radio" and give them the same name -->
<div class="row centered" id="singleTeams1">
<div class="col-md-3"><label><input value="3800" type="radio" name="single-teams1">ARI</label></div>
<div class="col-md-3"><label><input value="0200" type="radio" name="single-teams1">ATL</label></div>
<div class="col-md-3"><label><input value="0325" type="radio" name="single-teams1">BAL</label></div>
<div class="col-md-3"><label><input value="0610" type="radio" name="single-teams1">BUF</label></div>
</div>
<!-- or if you want checkboxes so that you can get multiple items give them a name as an array -->
<div class="row block-checkboxes" id="singleTeams2">
<div class="col-md-3"><label><input value="0750" type="checkbox" name="teams[]">CAR</label></div>
<div class="col-md-3"><label><input value="0810" type="checkbox" name="teams[]">CHI</label></div>
<div class="col-md-3"><label><input value="0920" type="checkbox" name="teams[]">CIN</label></div>
<div class="col-md-3"><label><input value="1050" type="checkbox" name="teams[]">CLE</label></div>
<div class="col-md-3"><label><input value="1200" type="checkbox" name="teams[]">DAL</label></div>
<div class="col-md-3"><label><input value="1400" type="checkbox" name="teams[]">DEN</label></div>
<div class="col-md-3"><label><input value="1540" type="checkbox" name="teams[]">DET</label></div>
<div class="col-md-3"><label><input value="1800" type="checkbox" name="teams[]">GB</label></div>
<div class="col-md-3"><label><input value="2120" type="checkbox" name="teams[]">HOU</label></div>
<div class="col-md-3"><label><input value="2200" type="checkbox" name="teams[]">IND</label></div>
<div class="col-md-3"><label><input value="2250" type="checkbox" name="teams[]">JAX</label></div>
<div class="col-md-3"><label><input value="2310" type="checkbox" name="teams[]">KC</label></div>
<div class="col-md-3"><label><input value="2510" type="checkbox" name="teams[]">LA</label></div>
<div class="col-md-3"><label><input value="4400" type="checkbox" name="teams[]">LAC</label></div>
<div class="col-md-3"><label><input value="2700" type="checkbox" name="teams[]">MIA</label></div>
<div class="col-md-3"><label><input value="3000" type="checkbox" name="teams[]">MIN</label></div>
<div class="col-md-3"><label><input value="3200" type="checkbox" name="teams[]">NE</label></div>
<div class="col-md-3"><label><input value="3300" type="checkbox" name="teams[]">NO</label></div>
<div class="col-md-3"><label><input value="3410" type="checkbox" name="teams[]">NYG</label></div>
<div class="col-md-3"><label><input value="3430" type="checkbox" name="teams[]">NYJ</label></div>
<div class="col-md-3"><label><input value="2520" type="checkbox" name="teams[]">OAK</label></div>
<div class="col-md-3"><label><input value="3700" type="checkbox" name="teams[]">PHI</label></div>
<div class="col-md-3"><label><input value="3900" type="checkbox" name="teams[]">PIT</label></div>
<div class="col-md-3"><label><input value="4600" type="checkbox" name="teams[]">SEA</label></div>
<div class="col-md-3"><label><input value="4500" type="checkbox" name="teams[]">SF</label></div>
<div class="col-md-3"><label><input value="4900" type="checkbox" name="teams[]">TB</label></div>
<div class="col-md-3"><label><input value="2100" type="checkbox" name="teams[]">TEN</label></div>
<div class="col-md-3"><label><input value="5110" type="checkbox" name="teams[]">WAS</label></div>
</div>
</section>
</div>
</body>
</html>
* {
填充：0；
保证金：0；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
}
身体{
字体大小：100%；
字号：200；
字母间距：.07em；
颜色：#7575；
背景色：#262626；
}
.集装箱{
宽度：260px；
}
.小组{
衬垫：