Question

我试图将两个输入元素，一个按钮和一个进度条对齐在一行中（CSS和bootstrap的新功能）。按钮与输入元素没有正确对齐。进度条甚至没有显示起来。我使用的html如下。

<div class="form-group">
   <input type="text" class="form-control" placeholder="from">
   <input type="text" class="form-control" placeholder="to">
   <input type="submit" class="form-control btn btn-default" value="Route">
   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
</div>

Answer 1

将班级form-inline添加到顶级div（或父级<form>）：

<div class="form-group form-inline">
   <input type="text" class="form-control" placeholder="from">
   <input type="text" class="form-control" placeholder="to">
   <input type="submit" class="form-control btn btn-default" value="Route">
   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
</div>

这是relevant documentation

需要并排对齐bootstrap元素

1 个答案: