引导程序中两列表单之间的不需要的空间

Question

我想为输入框创建类似于此的工具提示。Testing SOAP/REST Web Services Using JMeter

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

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

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

Answer 2

这种情况正在发生，因为列通过填充创建了排水沟（列内容之间的间隙）。该填充在第一列和最后一列的行中通过.rows。

上的负余量进行偏移

最好的方法是使用.input-group-addon

$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
  .input-group {
    position: static;
  }
  .input-group-addon {
    background-color: #fff;
    border: 0;
  }
  .input-group .form-control {
    border-radius: 4px!important;
  }
</style>

<div class=container>
  <div class="input-group" style="width:250px;">
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <span class="input-group-addon"><span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title="Tooltip on right"></span></span>
  </div>

</div>

Answer 3

表单的父div有一个15px的填充右边（也是左边的填充）

你可以为它应用一种风格来纠正它：

<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" style="padding-right:0;">
  <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 4

按照这样的html结构。这是使用工具提示和文本框的最佳方式。

＆＃13;

＆＃13;

.input {
  position: relative;
  padding-right: 100px;
}
.qtooltip {
  position: absolute;
  top:5px;
  right:75px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="<?php echo base_url('loginclient/verify'); ?>" method="post" name="login_form" onsubmit=" return validateForm()">
  <div class="form-group">
    <div class=" input">
      <input type="text" class="form-control" name="username" placeholder="username" autofocus="autofocus" pattern="([^ ]){6,}" title="Minimum length is 6, without any space." required="" />
      <div class="qtooltip">
        <a class="pull-left" data-toggle="tooltip" data-placement="bottom" title="Enter your username">?</a>
      </div>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;