如何在两个输入框字段之间留出空间？

Question

如何在引导程序中保持这两个输入字段之间的空间？需要横线

<div class="container">
           <div class="col-md-12">

            <input class="col-xs-3" id="inputdefault" type="text" placeholder="AWB ID" style="background-color:#DCDCDC; height:40px">

            <input class="col-xs-4" id="inputdefault" type="text" placeholder="Enter Your Traking Information..." style="background-color:#DCDCDC; height:40px">

           </div>
       </div>

原文由 Lion 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需将 col-xs-offset-2 类添加到您的第二个输入。该类将 margin-left 添加到元素中，并保留您需要的水平线。

 <div class="container">
    <div class="col-md-12">

        <input class="col-xs-3" id="inputdefault" type="text" placeholder="AWB ID" style="background-color:#DCDCDC; height:40px">

        <input class="col-xs-4 col-xs-offset-2" id="inputdefault" type="text" placeholder="Enter Your Traking Information..." style="background-color:#DCDCDC; height:40px">

    </div>
</div>

原文由 Leandro Soriano 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在这里你可以这样做。

首先不要这样做

• 你应该使用 id 唯一。
• 尽量不要使用内联 css

这里您使用的是引导程序，因此您可以使用表单组并在该表单组 div 中添加输入。

检查这个。它可能对你有帮助。

 .col-md-12 .inputDefault
{
    background-color:#DCDCDC;
    height:40px;
    width: 100%;
    display: inline-block;
}
.col-md-12 .form-group {
margin-bottom: 0;
}
.col-md-12 .form-group:nth-child(1n)
{
    display: inline-block;
    width: 100%;
    padding-top: 10px;
}
.col-md-12 .form-group:nth-child(1n)::before
{
    content: "";
    border-top: 1px solid #333;
    width: 100%;
    display: inline-block;
    padding-bottom: 10px;
}
.col-md-12 .form-group:nth-child(1)::before {
display: none;
}

 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
   <div class="col-md-12">
    <div class="form-group">
      <input class="col-xs-3 inputDefault" id="inputdefault" type="text" placeholder="AWB ID">
    </div>
    <div class="form-group">
      <input class="col-xs-4 inputDefault" id="inputdefault1" type="text" placeholder="Enter Your Traking Information...">
    </div>
    <div class="form-group">
      <input class="col-xs-3 inputDefault" id="inputdefault2" type="text" placeholder="AWB ID">
    </div>
    <div class="form-group">
      <input class="col-xs-4 inputDefault" id="inputdefault3" type="text" placeholder="Enter Your Traking Information...">
    </div>
   </div>
</div>

原文由 Nirav Joshi 发布，翻译遵循 CC BY-SA 3.0 许可协议