Unerwünschter Platz zwischen zwei Spalten des Formulars im Bootstrap

Question

Ich möchte Tooltip für Eingabefeld ähnlich wie dieses erstellen.

Aber wenn ich versuche in meinem Code gibt es zu viel Platz zwischen Eingabefeld und Tooltip wie in der folgenden Abbildung gezeigt. Ich verwende zwei verschiedene Spalten für Eingabefeld und Tooltip.

ist mein Code für Benutzername & Tooltip Zeile wie folgt:

<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 System mit Standard-padding so für Spaltenklasse inline CSS verwenden, um Overhead die Polsterung wie

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

Answer 2

das übergeordnete div von Form hat eine padding-right (und auch padding-left) von 15px

Sie einen Stil darauf anwenden kann es zu korrigieren:

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

Folgen HTML-Struktur wie diese. Dies ist der beste Weg Tooltip mit Textfeld zu verwenden.

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

Answer 4

Dies geschieht, weil Spalten Rinnen (Lücken zwischen den Spalteninhalt) über padding erstellen. Dieser Abstand wird in Zeilen für die erste und letzte Spalte über den negativen Rand von .rows versetzt.

Der beste Weg ist .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>