Question

我有这个代码，但由于某种原因，我在某个类型的缩进，当我在同一行放置多个框。我该如何解决这个问题？

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Company Name</label>
  <div class="col-md-5 col-sm-5 col-xs-12">
    <input type="text" class="form-control" required placeholder="company name" id="companyName">
  </div>
</div>
<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12">Address</label>
  <div class="col-md-5 col-sm-5 col-xs-12">
    <input type="text" class="form-control" required="required" placeholder="address" id="address">
  </div>
</div>

<div class="form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> <span class="required"></span>
  </label>
  <div class="control-group">
    <div class="col-md-6 col-sm-6 col-xs-12">
      <div class="col-md-4">
        <input required type="text" class="form-control" placeholder="zip code" id="zipCode">
      </div>
      <div class="col-md-4">
        <select class="select2_single form-control" tabindex="-1">
          <option value="" selected="selected">Select a state</option>
          <option value="stateAlabama">Alabama</option>
          <option value="stateAlaska">Alaska</option>
          <option value="stateArizona">Arizona</option>
          <option value="stateArkansas">Arkansas</option>
          <option value="stateCalifornia">California</option>
          <option value="stateColorado">Colorado</option>
          <option value="stateConnecticut">Connecticut</option>
          <option value="stateDelaware">Delaware</option>
          <option value="stateFlorida">Florida</option>
          <option value="stateGeorgia">Georgia</option>
          <option value="stateHawaii">Hawaii</option>
          <option value="stateIdaho">Idaho</option>
          <option value="stateIllinois">Illinois</option>
          <option value="stateIndiana">Indiana</option>
          <option value="stateIowa">Iowa</option>
          <option value="stateKansas">Kansas</option>
          <option value="stateKentucky">Kentucky</option>
          <option value="stateLouisiana">Louisiana</option>
          <option value="stateMaine">Maine</option>
          <option value="stateMaryland">Maryland</option>
          <option value="stateMassaschusetts">Massaschusetts</option>
          <option value="stateMichigan">Michigan</option>
          <option value="stateMinnesota">Minnesota</option>
          <option value="stateMississippi">Mississippi</option>
          <option value="stateMissouri">Missouri</option>
          <option value="stateMontana">Montana</option>
          <option value="stateNebraska">Nebraska</option>
          <option value="stateNevada">Nevada</option>
          <option value="stateNewHampshire">New Hampshire</option>
          <option value="stateNewJersey">New Jersey</option>
          <option value="stateNewMexico">New Mexico</option>
          <option value="stateNewYork">New York</option>
          <option value="stateNorthCarolina">North Carolina</option>
          <option value="stateNorthDakota">North Dakota</option>
          <option value="stateOhio">Ohio</option>
          <option value="stateOklahoma">Oklahoma</option>
          <option value="stateOregon">Oregon</option>
          <option value="statePennsylvania">Pennsylvania</option>
          <option value="stateRhodeIsland">RhodeIsland</option>
          <option value="stateSouthCarolina">SouthCarolina</option>
          <option value="stateSouthDakota">SouthDakota</option>
          <option value="stateTennessee">Tennessee</option>
          <option value="stateTexas">Texas</option>
          <option value="stateUtah">Utah</option>
          <option value="stateVermont">Vermont</option>
          <option value="stateVirginia">Virginia</option>
          <option value="stateWashington">Washington</option>
          <option value="stateWisconsin">Wisconsin</option>
          <option value="stateWyoming">Wyoming</option>
          <option value="stateWashingtonDC">Washington D.C.</option>
        </select>
      </div>
    </div>
  </div>
</div>

＆＃13;

注意，在左侧，盒子排成一行，表示它们不对齐。我知道这很小，但我的很多页面都遇到过这个问题。

我想使用bootstrap来放置邮政编码盒＆amp;状态选择器位于地址框下方，并且可以分割为50/50，所有这些都不使用css和bootstrap。

Answer 1

Bootstrap div默认包含15px padding-left和right。您会注意到您的邮政编码字段位于嵌套div中，为其他表单组提供了额外的15px填充。你会想做这样的事情让它们正确对齐：

<div class="form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12">Address</label>
   <div class="col-md-5 col-sm-5 col-xs-12">
       <input type="text" class="form-control" required = "required" placeholder="address" id = "address">
   </div>
</div>
<div class="form-group">
   <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> 
       <span class="required"></span>
   </label>
   <div class="control-group">
       <div class="col-md-6 col-sm-6 col-xs-12"> 
         <div class="col-md-4" style="padding-left:0px">
            <input required type="text" class="form-control"  placeholder="zip code" id = "zipCode">
         </div>
         <div class="col-md-4">
            <select class="select2_single form-control" tabindex="-1">
              <option value="" selected="selected">Select a state</option>
              </select>
         </div>
      </div>
    </div>
</div>

在同一行上具有多个框的缩进

1 个答案: