Question

我不太需要真正设置网页样式，而且我在使用Bootstrap时遇到了问题。如下面的bootply所示，使用引导列和一些自定义样式的简单页面会在页面调整大小时使标签与文本框重叠 - 例如，尝试缩小页面的宽度。我错过了什么导致了这种行为？

http://www.bootply.com/ttuZZWim70

谢谢！

Answer 1

如果您尝试创建水平表单，则需要添加相应的Bootstrap水平表单类。可以在Horizontal Form找到示例。您可能希望使用表单元素上的form-horizontal类和带有form-group的每组标签/输入来构建类似于以下内容的html。您可以根据需要调整col-sm-*来整理布局。最佳做法是尝试将列定义col-*-*添加到最多12个。两个form-group要显示在一行上，您可以使用col-md-6之类的内容包裹每个form-group {1}}。

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <form class="form-horizontal">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">Long name test 1</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="Test">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">Long name test 1</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputEmail3" placeholder="Test">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

这是一个显示示例的jsfiddle。您需要扩展结果窗口以便能够并排查看元素。水平表单元素占用了相当多的空间，所以我可能会建议给每个单独的行提供类似于bootstrap上的示例。

如果有帮助，请告诉我。谢谢！

Answer 2

您可以尝试使用以下链接。

fiddle

<form class="well span12">
    <div class="row">
      <div class="span6">
        <label>Long name test 1</label>
        <input type="text" class="span6">
        <label>Long name test 3</label>
        <input type="text" class="span6">
      </div>
      <div class="span6">
        <label>Long name test 2</label>
        <input type="text" class="span6">
        <label>Long name test 4</label>
        <input type="text" class="span6">
      </div>
    </div>        
</form>

Answer 3

将其复制并粘贴到您的代码中确保它可以正常工作。

                        <div class="form-group field">
                            <label>Email Address</label>
                            <input  type="text" class="form-control" placeholder="Email Address">
                        </div>

Bootstrap中的标签涵盖了文本框

3 个答案: