Нежелательное пространство между двумя столбцами формы в бутстрапе

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 система сетка, имеющая обивка по умолчанию для класса колонки, так что используйте встроенный CSS, чтобы над головой отступов как

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

Answer 2

родительский 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 3

Follow HTML структуру, как это. Это лучший способ использовать всплывающую подсказку с текстовым полем.

.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

Это происходит потому, что колонны создают желоба (пробела между содержанием столбца) через дополнение. Это заполнение смещается в строках для первого и последнего столбцов с помощью отрицательного поля на .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>