Ввод текста и кнопка в том же ряду с помощью Bootstrap
Я использую базовую загрузку файла bootstrap-fileupload.js, чтобы дать мне имя файла и кнопку и хочу повторить формат с помощью текстового ввода и кнопки.
<div class="form-group">
<label class="control-label">Source File Name</label>
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-group">
<div class="form-control uneditable-input"><i class="icon-file fileupload-exists"></i>
</div>
<div class="input-group-btn">
<a class="btn btn-default btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input type="file" class="file-input"/></a>
<a href="#" class="btn btn-default fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>
</div>
</div>
</div>
<form id="frmOptions" method="post" class="form-inline span12">
<div class="row-fluid">
<div class="form-group">
<label class="control-label">File Name on Upload</label>
<div class="input-group ">
<input id="uploadname" type="text" class="form-control">
<a class="btn btn-default go inline">Upload to DocMan</a>
</div>
</div>
</div>
</form>
Страница размещена здесь https://googledrive.com/host/0B90FGJizRd-gbm1JRUswYUY5dE0/bootstrap/
Я пробовал варианты этого без эффекта. В принципе, мне нужны две одинаковые строки с полной шириной, каждая с текстовым полем и кнопкой. Любые советы приветствуются.
Ответы
Ответ 1
Попробуйте следующее:
- Удалить класс "form-inline" из формы
- Добавить класс "input-group-btn" на кнопку
Результат html:
<form id="frmOptions" method="post" class="span12">
<div class="row-fluid">
<div class="form-group">
<label class="control-label">File Name on Upload</label>
<div class="input-group ">
<input id="uploadname" type="text" class="form-control">
<a class="input-group-btn btn btn-default go inline">Upload to DocMan</a>
</div>
</div>
</div>
</form>
Ответ 2
Вы используете группу ввода
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
Ответ 3
Вы можете обернуть его в div с классом "navbar-form". Это поместит все внутри встроенного.
Ответ 4
Один из вариантов - переопределить стиль display:block;
элемента управления формой класса. Я отправил образец кода в следующий ответ:
bootstrap: выровняйте ввод с помощью кнопки