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有位置：绝对式。但是你可以定义自己的类。使用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>

Answer 2

使用以下CSS。我在表单中添加了class，以便将其与常规表单区分开来，并从组中删除col类，假设它们浮动列。

＆＃13;

.inline-form .form-group {
  display: inline-block;
  vertical-align: bottom;
}

.inline-form label {
  display: block;
}

.inline-form input {
  border: none;
  border-bottom: solid 1px;
}

＆＃13;

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

＆＃13;

如何使这个表格正确内联？

2 个答案: