Question

我真的需要一些帮助。我整天都在弄乱这个表格而且我不能用这些方块来显示我需要它们的位置。我将在下面列出我想要的样子。我一直在使用form-inline和form-horizontal尝试不同的事情，但它只是不起作用。

任何帮助都将不胜感激。

以下是我一直在尝试的一些内容：

<form class="form-horizontal">
                    <div class="col-md-6">
                        <h4>Shipping Address</h4>
                        <hr>
                    </div>

                    <div class="col-md-6">
                        <h4>Contact Info</h4>
                        <hr>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group row">
                            <label for="inputKey" class="col-md-2 control-label">First Name</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" id="inputKey" placeholder="First Name">
                            </div>
                            <label for="inputValue" class="col-md-3 control-label">Email Address</label>
                            <div class="col-md-4">
                                <input type="text" class="form-control" id="inputValue" placeholder="Email Address">
                            </div>
                        </div>
                    </div>

                </form>

Answer 1

您只需要确保使用正确的行/列，并且不要将form-horizonal与网格列一起使用。

<form class="row">
        <div class="col-md-6">
            <h4>Shipping Address</h4>
            <hr>
        </div>
        <div class="col-md-6">
            <h4>Contact Info</h4>
            <hr>
        </div>
        <div class="col-md-12">
            <div class="form-group row">
                <label for="inputKey" class="col-md-2 control-label">Key</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" id="inputKey" placeholder="Key">
                </div>
                <label for="inputValue" class="col-md-2 control-label">Other</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" id="inputValue" placeholder="Value">
                </div>
            </div>
            <div class="form-group row">
                <label for="inputKey" class="col-md-2 control-label">State</label>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputSt" placeholder="ST">
                </div>
                <div class="col-md-2">
                    <input type="text" class="form-control" id="inputZip" placeholder="Zip">
                </div>
                <label for="inputValue" class="col-md-2 control-label">Other</label>
                <div class="col-md-4">
                    <input type="text" class="form-control" id="inputValue" placeholder="Value">
                </div>
            </div>
        </div>
    </form>

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

输入字段不以对齐形式或水平对齐

1 个答案: