2016-09-15 2 views
0

Почему я не вижу добавление группы ввода рядом с текстовым полем?Входная группа addon alignment

<html> 
    <head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" /> 
    </head> 
    <style> 
    input 
    { 
     max-width: 280px; 
    } 
    </style> 
    <body> 
    <div class="input-group"> 
     <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1" /> 
     <span class="input-group-addon" id="basic-addon1">@</span> 
    </div> 
    </body> 
</html> 

Что мне нужно сделать, чтобы отобразить содержимое пролете после текстового поля, примыкающего к нему без какого-либо зазора.

ответ

0

Ваша проблема заключается в максимальной ширине, которую вы вводите на вход. попробуйте положить его на входной группе, а не как:

.input-group { 
 
     max-width: 280px; 
 
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="input-group"> 
 
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"> 
 
    <span class="input-group-addon" id="basic-addon1">@</span> 
 
</div>

+0

OK. Но знаете ли вы, почему диапазон не отображается рядом с текстовым полем и отображается с выравниванием по правому краю? –

+0

Я добавил фрагмент кода - при запуске он отображает его правильно? –

+0

Да, да. Я просто хотел знать, почему контент в диапазоне выравнивается по правому краю, если содержащийся элемент шире. –