Question

我刚刚开始使用bootstrap。最后，我想创建一个适用于所有外形的网页。

通过这个页面，我创建了一个包含2行的表单，每行包含3列。当我将视图放大时，第二列和第三列中的字段会错位。有没有人有建议？

这是我的Jsfiddle，这是HTML：

<body>
  <div class="container body-content">
  <div class="container-fluid">
      <form action="/Bills/AddBill" method="post">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        </div>

        <div id="row1 " class="row">
          <div class="form-group">
            <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
              <label for="User_Id:">User Id:</label>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-xs-9">
              <input class="text-box single-line" id="UserId" name="UserId" type="text" value="rrg">
            </div>

          </div>

          <div class="form-group">
            <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
              <label for="Bill_Dt:">Bill Dt:</label>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-xs-9 text-left">
              <input class="datepicker hasDatepicker" id="FbDt" name="FbDt" placeholder="Freight Bill Date" type="text" value="1/1/0001 12:00:00 AM">
            </div>

          </div>

          <div class="form-group">
            <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
              <label for="Ship_Dt:">Ship Dt:</label>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-xs-9 text-left">
              <input class="datepicker hasDatepicker" id="ShipDt" name="ShipDt" placeholder="Ship Date" type="text" value="">
            </div>

          </div>
        </div>

        <div id="row2 " class="row">
          <div class="form-group">
            <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
              <label for="SCAC:">SCAC:</label>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-xs-9 text-left">
              <input class="text-box single-line" id="SCAC" name="SCAC" type="text" value="">
            </div>

          </div>

          <div class="form-group">
            <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
              <label for="Pro_Number:">Pro Number:</label>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-xs-9">
              <input class="text-box single-line" id="ProNum" name="ProNum" type="text" value="">
            </div>

          </div>

          <div class="form-group">
            <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4 text-left">
              <label for="Bill_of_Laden:">Bill of Laden:</label>
            </div>
            <div class="col-lg-2 col-md-2 col-sm-4 col-xs-9">
              <input class="text-box single-line" id="BillOfLaden" name="BillOfLaden" type="text" value="">
            </div>

          </div>
        </div>
      </form>
    </div>
  </div>

  <div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
</body>

Answer 1

您可以使用解决方案https://jsfiddle.net/va7mh47m/9/

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <form action="/Bills/AddBill" method="post">
    <div id="row1" class="row">
      
      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="form-group">
          <label for="User_Id:">User Id:</label>
          <input class="text-box single-line" id="UserId" name="UserId" type="text" value="rrg">
        </div>
      </div>
  
      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="form-group">
          <label for="Bill_Dt:">Bill Dt:</label>
          <input class="datepicker hasDatepicker" id="FbDt" name="FbDt" placeholder="Freight Bill Date" type="text" value="1/1/0001 12:00:00 AM">
        </div>
      </div>

      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="form-group">
          <label for="Ship_Dt:">Ship Dt:</label>
          <input class="datepicker hasDatepicker" id="ShipDt" name="ShipDt" placeholder="Ship Date" type="text" value="">
        </div>
      </div>
    </div>

    <div id="row2 " class="row">
      
      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="form-group">
          <label for="SCAC:">SCAC:</label>
          <input class="text-box single-line" id="SCAC" name="SCAC" type="text" value="">
        </div>
      </div>

      <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="form-group">
          <label for="Pro_Number:">Pro Number:</label>
          <input class="text-box single-line" id="ProNum" name="ProNum" type="text" value="">
        </div>
      </div>
 
     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <div class="form-group">
          <label for="Bill_of_Laden:">Bill of Laden:</label>
          <input class="text-box single-line" id="BillOfLaden" name="BillOfLaden" type="text" value="">
        </div>
      </div>
    </div>
  </form>
</div>

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>

＆＃13;

Answer 2

这是form-group类margin-bottom: 15px css规则的错误对齐。如果有必要，您可以使用没有此课程的表单，也可以使用margin-bottom: 0

为这些表单组创建课程

我还建议为输入设置100%宽度或使用bootstrap类form-control以避免列重叠。

P.S。检查form-horizontal帮助程序类可能对您更有用。我使用form-horizontal JSFiddle

略微更改了您的示例

Bootstrap表格对齐问题

2 个答案: