Question

如何在bootstrap中保持这两个输入字段之间的空间？需要水平线

<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>

Answer 1

您可以使用{margin-bottom:20px;}标记在两个输入框字段之间留出空格。

#inputdefault {
  margin-bottom: 20px; //you want space 
}

<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">
  <br/>
    <input class="col-xs-4" id="inputdefault" type="text" placeholder="Enter Your Traking Information..." style="background-color:#DCDCDC; height:40px">
  </div>
</div>

Answer 2

您可以添加多个 ，但这看起来会很混乱。使用“保证金”是更好的选择。

 <input class="col-xs-3" id="inputdefault" type="text" placeholder="AWB ID" style="background-color:#DCDCDC; height:40px"> <br>
<input class="col-xs-4" id="inputdefault" type="text" placeholder="Enter Your Traking Information..." style="background-color:#DCDCDC; height:40px; margin-top: 5%">

Answer 3

只需将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>

Answer 4

你可以这样做。

首先不要这样做

你应该使用id unique。
尽量不使用内联css

您正在使用bootstrap，因此您可以使用form-group并在该form-group 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>

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

4 个答案: