引导程序中两列表单之间的多余空间

Question

I want to create tooltip for input box similar to this.

But when I try in my code there is too much space left in between input box and tooltip as shown in below image. I am using two different columns for input box and tooltip.

My Code for username & tooltip row is as follows:

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

Answer 2

This is happening because columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.

Best way is to use .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

the parent div of form has a padding-right (and also padding-left) of 15px

you can apply a style to it to correct it:

 <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

Follow html structure like this. This is the best way use tooltip with text box.

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

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