css - 如何正确内联此表单？

Question

我正在尝试使用 bootstrap 中的 sr-only 类来制作内联表单。

应该是这样的:

Title              Cost
________________   __________   ______ days at $ ______  X (remove button)

我已经在很多地方进行了搜索，但找不到解决方案。

<form>
    <div class="form-group col-sm-5">
        <label for="name" class="control-label">Title</label>
        <input type="email" value='' class="form-control" id="name" placeholder="Title" />
    </div>
    <div class="form-group col-sm-2">
        <input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> days
    </div>
    <div class="form-group col-sm-2">
        <input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> /day
    </div>
</form>

Example

Answer 1

.sr-only 类具有 position:absolute 样式。但是你可以定义你自己的类。使用 margin-top 或 height。看看我为你做的这个例子，这样你就可以有一个想法(见整页选项中的片段):

.form-group > .sr-only.control-label {
  display: block;
  position: relative;
  height: 27px;
}

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<form>
  <div class="form-group col-sm-5">
    <label for="name" class="control-label">Title</label>
    <input type="email" value='' class="form-control" id="name" placeholder="Title" />
  </div>
  <div class="form-group col-sm-2">
    <label class="sr-only control-label" for="exampleInputEmail3">&bnsp;</label>
    <div class="input-group">
      <input type="email" value='' class="form-control" id="name" placeholder="Ime" >
      <div class="input-group-addon">days</div>
    </div>
  </div>
  <div class="form-group col-sm-2">
    <label class="sr-only control-label" for="exampleInputEmail3">&bnsp;</label>

    <div class="input-group">
      <input type="email" value='' class="form-control" id="name" placeholder="Ime" >
      <div class="input-group-addon">days</div>
    </div>
  </div>

</form>