Текстовое поле и кнопки не выравниваются
Я не понимаю, почему мои кнопки и текстовое поле не выравниваются.
<div class = "form-group">
<label class = "control-label col-md-3 col-sm-3 col-xs-12" for = "Pic">Picture/File</label>
<div class = "col-md-9 col-sm-7 col-xs-12">
<div class = "input-group input-file" >
<span class = "input-group-btn">
<button class = "btn btn-info btn-choose float-left" type = "button">Choose</button>
</span>
<input type = "text" class = "form-control" id = "Pic" placeholder='Choose a file...' />
<span class = "input-group-btn">
<button class = "btn btn-danger btn-reset float-left" type = "button">Reset</button>
</span>
</div>
</div>
</div>Я хочу, чтобы мое текстовое поле и кнопки были выровнены плавно, к сожалению, это не так. Есть какой-либо способ сделать это? нижняя строка текстовых полей не соответствует кнопке выбора и сброса.
он работает отлично. проверьте jsfiddle.net/ystvjxx0. может быть, какой-то другой css влияет на это
он работает отлично ... вы хотите сказать, что хотите вырезать сбоку от кнопки ввода, как на рис?
Работает отлично
да, здесь, но не на моей стороне @Zuber, вы правы, на что влияет css
Вы действительно используете Bootstrap 4? Класса col-xs в нем нет. Это просто col.
Ответы 1
Попробуйте добавить эти строки. Может нужно overridecss
.input-file button, .input-file input[type = "text"] {
height: 40px; // Change as per your requirement
}
рабочая рабочий пример здесь
Если этот ответ решил ваш вопрос, пожалуйста, примите его, нажав на галочку. Это показывает широкому сообществу, что вы нашли решение, и дает некоторую репутацию как автору, так и вам. Это не обязательно. :) @Sarah_Salar
Проверьте высоту кнопки.