Question

我写了一个简单的bootstrap表单，如here所示。我希望文字放在标签旁边，我的CSS不能正常工作 HTML code：

    <title>Bootstrap 101 Template</title>
<div class="col-md-6">
    <label>Enter the name</label>
    <div class="col-sm-4 ippos">
        <input type="text" class="form-control" placeholder="Name, please!" />
    </div>
</div>

我该怎么办？如何覆盖表单控件的属性？

Answer 1

Bootstrap 3有一个名为form-horizontal的表单元素类，它使标签元素与表单输入内联。您可以在css中使用宽度和显示内联的混合，但bootstrap为您提供干净且自定义的无css方式。要查看它及其工作原理，请访问form-horizontal

的bootstrap文档

您的代码可能如下所示：

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label class="control-label col-xs-4">Enter the name</label>
        <div class="col-xs-8">
            <input type="text" class="form-control" placeholder="Name, please!">
        </div>
     </div>
</form>

Answer 2

我不确定为什么它没有成功。试试这个，可能是：

<强> HTML

<title>Bootstrap 101 Template</title>
<div class="col-md-6">
    <label>Enter the name</label>
    <input type="text" class="form-control inline" placeholder="Name, please!" />
</div>

<强> CSS

label {display: inline-block;}
.form-control.inline {display: inline-block; width: 200px;}

请在评论中告诉我，如果它不起作用！

小提琴：https://jsfiddle.net/rpgf10ks/3/

使文本以引导形式在标签旁边

2 个答案: