Question

我添加了一个！important来确保我的css规则首先出现，但我的输入仍然表现得像块中显示的那样; fiddle

input{
    display: inline!important;
  }

<p>My name is 
    <input type="text" placeholder="Name" class="form-control" style='display:inline;'/>
from USA. And I'm     <input type="text" placeholder="21" class="form-control" style='display:inline;'/> years old.
</p>

Answer 1

您需要做的就是将宽度重置为auto - 它是100%。值得注意的是Bootstrap样式来自.form-control选择器;用它来覆盖它。

Updated Example

.form-control {
    width:auto;
    display:inline-block;
}

无需内联样式或!important。

Answer 2

<p>My name is 
    <input type="text" placeholder="Name" name="name" class="form-control"  style='display:inline; width:100px'/>
from USA. And I'm     <input type="text" name="age" placeholder="21" class="form-control" style='display:inline; width:100px'/> years old.
</p>

您可以使用CSS调整输入按钮的大小，包括输入样式的宽度

Answer 3

我添加了内联表单的表单标记，当页面上有足够的空间用于一行时，它可以正常工作。

<form class="form-inline" role="form">
<div class="form-group">

<p>My name is 
<input type="text" placeholder="Name" name="name" class="form-control" style='display:inline;'/>
from USA. And I'm     <input type="text" name="age" placeholder="21" class="form-control" style='display:inline;'/> years old.
</p>

</div>
</form>

以下是来自getbootstrap.com的更多信息。

＆＃34;将.form-inline添加到左对齐和内联块控件中。这仅适用于视口中至少为768像素宽的表单。

需要自定义宽度   默认情况下，Bootstrap中的输入，选择和textareas是100％宽。要使用内联表单，您必须在其中使用的表单控件上设置宽度。＆＃34;

http://getbootstrap.com/css/

当jsfiddle足够宽时，可以在jsfiddle中使用。

如何使用bootstrap输出内联文本

3 个答案: