twitter-bootstrap – 水平表单:标签旁边的文本输入不起作用

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 水平表单:标签旁边的文本输入不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图将标签与Bootstrap 4水平形式的文本框放在同一行.似乎没有用.文本框始终显示在下一行中.任何帮助是极大的赞赏.

<div class="form-group form-group-sm col-sm-6">
  <label for="first_name" class="col-form-label">First Name</label>
  <div>
    <input type="text" class="form-control" id="first_name" name="first_name">
  </div>
</div>

小提琴:https://jsfiddle.net/gunnersfan/mrc4tdu1/

解决方法

col- *必须在.row中.在标签上使用网格列类并输入包装器…

http://www.codeply.com/go/TUs7hGHnXP

<form class="form-horizontal">
    <div class="container">
        <div class="row">
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="first_name" class="col-sm-3 col-form-label">First Name</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="first_name" name="first_name">
                    </div>
                </div>
            </div>
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="last_name" class="col-sm-3 col-form-label">Last Name</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="last_name" name="last_name">
                    </div>
                </div>
            </div>
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="Street" class="col-sm-3 col-form-label">Street</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="Street" name="Street">
                    </div>
                </div>
            </div>
            <div class="form-group form-group-sm col-sm-6">
                <div class="row">
                    <label for="City" class="col-sm-3 col-form-label">City</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="City" name="City">
                    </div>
                </div>
            </div>

        </div>

    </div>
</form>

http://www.codeply.com/go/TUs7hGHnXP

猜你在找的Bootstrap相关文章