html - 如何在 Bootstrap 中自定义两个文本输入之间的空间

Question

在 bootstarp 中输入的文本之间需要水平空间。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-md-12">
    <div class="col-sm-6 col-lg-4">
      <div class="form-group">
        <!-- <div class="col-md-8"> -->
        <input class="col-xs-3-offset-4" id="inputdefault" type="text" placeholder="AWB ID" style="background-color:#DCDCDC; height:40px">
        <!-- </div> -->
      </div>
    </div>

    <div class="col-sm-6 col-lg-4"> 
      <div class="form-group">
      <!-- <div class="col-md-8"> -->
        <input class="col-xs-4-offset-6" id="inputdefault" type="text" placeholder="Enter Your Traking Information..." style="background-color:#DCDCDC; height:40px;">
      <!-- </div> -->
      </div>
    </div>
   </div>
</div>

这怎么能做好。 HTML 空间不起作用。

Answer 1

我想你是这样的

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}
.form-inline .form-control {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}
.form-inline .form-group { margin-right:20px;}
</style>

<form class="form-inline" role="form">
    <div class="form-group">
      <label for="email2">Email:</label>
      <input type="email" class="form-control" id="email2" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label for="pwd2">Password:</label>
      <input type="password" class="form-control" id="pwd2" placeholder="Enter password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="button" class="btn btn-default">Submit</button>
  </form>