Question

尝试将32个复选框与4个行中的标签对齐。它目前正在垂直堆叠所有32个。我在其他示例之后对我的代码进行了建模，但无论我做什么，我仍然会得到相同的结果。不确定它是我的html还是css ......

这是一个JS Bin链接：https://jsbin.com/pepejom/edit?html,css,output

这是我的HTML：

    <!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>

这是我的css：

* {
    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;
}

.panel {
  padding: 1em;
  margin: 0 auto;
  margin-bottom: 5px;
  width: 260px;
  border-style: solid;
  border-width: 1px;
  border-color: #333333;  1F1F1F
  background-color:#292929;
}

.radio_checkbox { margin-right: 5px; }

div {
    /* text-align: left; */
    margin-bottom: 5px;
}

.centered {
    border: solid;
    border-color: #fff;
    border-width: 1px;
    text-align: center;
}

上面的html使用JS Bin中的链接进行引导。在我的实际代码中，我链接到我已下载并在本地使用的bootstrap ...

<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">

Answer 1

您可以将width属性从 .panel 移动到 .container {width：260px; ，它应该有用。

此外，我对您的代码进行了一些更改，以便更接近引导标准。希望它有帮助......！

<!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>

我将样式嵌入到同一文档中以使其更紧凑，您可以随时将其分开

Answer 2

尝试将table-cell属性用于div容器，.container类。

只需添加：

.container{
    display: table-cell;
}

这样的事情：

.container{
    display: table-cell;
}

* {
    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;
}

.panel {
  padding: 1em;
  margin: 0 auto;
  margin-bottom: 5px;
  width: 260px;
  border-style: solid;
  border-width: 1px;
  border-color: #333333;  1F1F1F
  background-color:#292929;
}

.radio_checkbox { margin-right: 10px !important; }

div {
    /* text-align: left; */
    margin-bottom: 5px;
}

.centered {
    border: solid;
    border-color: #fff;
    border-width: 1px;
    text-align: center;
}

<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>

Answer 3

您需要将四个组放在行中：

<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....

Bootstrap代码不起作用：Row＆amp; Col，复选框垂直显示

3 个答案: