Question

我想在bootstrap中输入后添加“month”，在它的旁边。我试过span，pull-left没有任何效果。 Months始终低于

<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Months</label>
<input type="email" class="form-control" style="width: 50%" id="exampleInputEmail1" placeholder="Months"> months
</div>
</form>

JSFIDDLE

Answer 1

只需在表单中添加form-inline ..

<form role="form" class="form-inline">
    <div class="form-group">
        <label for="exampleInputEmail1">Months</label>
        <input type="email" class="form-control" style="width: 50%" id="exampleInputEmail1" placeholder="Months"> months
    </div>
</form>

演示：http://www.bootply.com/119625

Answer 2

尝试包装元素并指定列宽：

<强> HTML

 <form role="form">
  <div class="form-group">
     <div class="pull-left col-xs-9">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
     </div>
    <span class="col-xs-3">months<span>
  </div>
</form>

<强> CSS

span{
    margin-top: 25px;
}

JS小提琴： http://jsfiddle.net/7rYp7/2/

Answer 3

您可以在CSS中设置以下内容（覆盖bootstrap.css）

.form-group input {
    display:inline;
    width: 50%;
    margin: 5px;
}

您还可以使用其他选择器更具体（而不是覆盖所有输入）更新：

#exampleInputEmail1{
        display:inline;
        width: 50%;
        margin: 5px;
}

.form-group label {
    display: block;
}

Answer 4

将style="display:inline"放入有问题的实际输入元素对我有用。

听着，我知道我们应该避免使用style并且只使用CSS中定义的类，但我尝试了上面的所有示例，这是唯一有用的。

如何在输入文本后添加文本

4 个答案: