Question

我尝试在这个网站上找到一个答案，就是将行放在一行中，但它没有用。

我遇到的问题是代码相同时，列的排列方式不同。在中型或大型屏幕上，第二列的标签似乎向左拉。标签和字段之间的空间不同，表单组之间的间距也是关闭的。在xs屏幕上，第二列中的字段宽度较短。

代码粘贴在下面。我试图让对齐与它在第一列中的显示方式相同。

<html>
<head>

    <meta charset="UTF-8">     
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title> </title>

     <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap-social.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">

</head>
<body>

<div class="container-fluid">

<div class="row box">

<div class="col-xs-12 col-md-6">
 <div class="row">

<form class="form-horizontal"  method="POST" role="form">    

  <div class="form-group">            
    <label for="claimant1" class="col-sm-3 control-label">Claimant 1</label>
    <div class="col-sm-9">
    <input type="text" class="form-control" id="claimant1" name="claimant1" placeholder="Enter 1st Claimant">
    </div>
   </div>

  <div class="form-group">
     <label for="gender" class="col-sm-3 control-label">Gender</label>
     <div class="col-sm-9">
       <label class="radio-inline"><input type="radio" name="gender" value="Male">Male</label>
       <label class="radio-inline"><input type="radio" name="gender" value="Female">Female</label>           
     </div>
   </div>

  <div class="form-group">            
    <label for="age1" class="col-sm-3 control-label">DOB</label>
    <div class="col-sm-9">
    <input type="date" class="form-control" id="age1" name="age1" placeholder="">
    </div>
   </div>   

  </div> <!-- /row -->    
</div> <!-- /column -->

<div class="col-xs-12 col-md-6" >        
  <div class="row">

    <div class="form-group">            
    <label for="claimant2" class="col-sm-3 control-label">Claimant 2</label>
    <div class="col-sm-9">
    <input type="text" class="form-control" id="claimant2" name="claimant2" placeholder="Enter 2nd Claimant">
    </div>
   </div>

  <div class="form-group">
     <label for="gender2" class="col-sm-3 control-label">Gender</label>
     <div class="col-sm-9">
       <label class="radio-inline"><input type="radio" name="gender2" value="Male">Male</label>
       <label class="radio-inline"><input type="radio" name="gender2" value="Female">Female</label>           
     </div>
   </div>

  <div class="form-group">            
    <label for="age2" class="col-sm-3 control-label">DOB</label>
    <div class="col-sm-9">
    <input type="date" class="form-control" id="age2" name="age2" placeholder="">
    </div>
   </div>        

  </div>  <!-- /row -->
</div> <!-- /column -->  

</div> <!-- / row box -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>


</body>
</html>

Answer 1

您错过了表单标记，这是您的更新代码

<html>

  <head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title> </title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap-social.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">

  </head>

  <body>

    <div class="container-fluid">

      <div class="row box">

        <div class="col-xs-12 col-md-6">
          <div class="row">

            <form class="form-horizontal" method="POST" role="form">

              <div class="form-group">
                <label for="claimant1" class="col-sm-3 control-label">Claimant 1</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="claimant1" name="claimant1" placeholder="Enter 1st Claimant">
                </div>
              </div>

              <div class="form-group">
                <label for="gender" class="col-sm-3 control-label">Gender</label>
                <div class="col-sm-9">
                  <label class="radio-inline">
                    <input type="radio" name="gender" value="Male">Male</label>
                  <label class="radio-inline">
                    <input type="radio" name="gender" value="Female">Female</label>
                </div>
              </div>

              <div class="form-group">
                <label for="age1" class="col-sm-3 control-label">DOB</label>
                <div class="col-sm-9">
                  <input type="date" class="form-control" id="age1" name="age1" placeholder="">
                </div>
              </div>
            </form>
          </div>
          <!-- /row -->
        </div>
        <!-- /column -->

        <div class="col-xs-12 col-md-6">
          <div class="row">
            <form class="form-horizontal" method="POST" role="form">

              <div class="form-group">
                <label for="claimant2" class="col-sm-3 control-label">Claimant 2</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" id="claimant2" name="claimant2" placeholder="Enter 2nd Claimant">
                </div>
              </div>

              <div class="form-group">
                <label for="gender2" class="col-sm-3 control-label">Gender</label>
                <div class="col-sm-9">
                  <label class="radio-inline">
                    <input type="radio" name="gender2" value="Male">Male</label>
                  <label class="radio-inline">
                    <input type="radio" name="gender2" value="Female">Female</label>
                </div>
              </div>

              <div class="form-group">
                <label for="age2" class="col-sm-3 control-label">DOB</label>
                <div class="col-sm-9">
                  <input type="date" class="form-control" id="age2" name="age2" placeholder="">
                </div>
              </div>
            </form>
          </div>
          <!-- /row -->
        </div>
        <!-- /column -->

      </div>
      <!-- / row box -->
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>


  </body>

</html>

相同的Bootstrap列对齐/格式不同

1 个答案: