javascript - Bootstrap 中两列表单之间不需要的空间

Question

我想为类似于此的输入框创建工具提示。

但是当我在我的代码中尝试时，输入框和工具提示之间留有太多空间，如下图所示。我为输入框和工具提示使用了两个不同的列。

我的用户名和工具提示行代码如下:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
<div class="col-xs-0 col-sm-3"></div>
<div class="col-xs-11 col-sm-4">
  <form action="<?php echo base_url('loginclient/verify'); ?>" method="post" name="login_form" onsubmit=" return validateForm()">
  <div class="form-group">
  <input type="text" class="form-control" name="username" placeholder="username" autofocus="autofocus" pattern="([^ ]){6,}" title="Minimum length is 6, without any space." required="" />
  </div>
</div>
<div class="col-xs-1 col-sm-1" style="background-color:pink">
  <a class="pull-left" data-toggle="tooltip" data-placement="bottom" title="Enter your username">?</a>
</div>
<div class="col-xs-0 col-sm-4"></div>
</div>

Answer 1

Bootstrap Grid 系统具有列类的默认填充，因此使用内联 css 来开销填充，如

<div class="col-xs-1 col-sm-1" style="background-color:pink; padding:0px !important;">