Question

我使用bootstrap网格有以下标记：

<form id="store-form" class="user-form">

    <div class="row">

        <div class="col-sm-6">
            <fieldset id="store-form-store-fields">
                <label>Store Nickname</label>
                <input id="store-nickname-field" type="text" name="nickname" required class="form-control">
            </fieldset>
        </div>

        <fieldset id="store-form-location-fields">
            <div class="col-sm-6">
                <label>Store Address</label>
                <input id="store-street-field" type="text" name="street" required class="form-control">
            </div>

            <div class="col-sm-6">
                <label>City</label>
                <input id="store-city-field" type="text" name="city" required class="form-control">
            </div>

            <div class="col-sm-3">
                <label>State</label>
                <select id="store-state-field" name="state_id" required class="form-control">
                    <option>- Select a State -</option>
                    <option value="MA">Massachusetts</option>
                    <option value="CA">California</option>
                </select>
            </div>

            <div class="col-sm-3">
                <label>Zip Code</label>
                <input id="store-zipcode-field" type="text" name="zipcode" required class="form-control">
            </div>
        </fieldset>

    </div>

    <div class="submit-wrapper">
        <button id="store-form-submit" type="submit" class="btn btn-primary submit-button">Save</button>
    </div>

</form>

如您所见，我尝试使用字段集将字段分组为两组。我需要这样做，以便我可以分别为每组字段创建Backbone.js视图。显然这打破了网格，因为我有一个.row的直接孩子不是列div。

有没有办法让字段集与使用Bootstrap网格布局的表单一起工作？

编辑以澄清：我的目标是使布局的行为与从示例中删除字段集的行为相同。

Answer 1

如何将第二个<fieldset>包裹在div.col-md-6中并将第二个<fieldset>的所有内容放入div.row？这样你就不会跳过css列定义了。如果有帮助，请告诉我。

更新：

我修改了代码以使用自适应重置和col-md-pull / col-sm-pull。似乎保持敏感。这可能是最接近的解决方案，因为您无法正确关闭该字段集中的列定义<div>以获得正确的清算。

http://jsfiddle.net/s9baun7c/4/

<form id="store-form" class="user-form">
    <div class="row">
        <div class="col-sm-6">
            <fieldset id="store-form-store-fields">
                <label>Store Nickname</label>
                <input id="store-nickname-field" type="text" name="nickname" required class="form-control" />
            </fieldset>
        </div>
        <fieldset id="store-form-location-fields">
            <div class="col-sm-12">
                <label>Store Address</label>
                <input id="store-street-field" type="text" name="street" required class="form-control" />
            </div>
            <div class="clearfix visible-md-block"></div>
            <div class="clearfix visible-sm-block"></div>
            <div class="row">
                <div class="col-md-12">
                    <div class="col-sm-12 col-sm-pull-12 col-sm-pull-12">
                        <label>City</label>
                        <input id="store-city-field" type="text" name="city" required class="form-control" />
                    </div>
                    <div class="clearfix visible-md-block"></div>
                    <div class="clearfix visible-sm-block"></div>
                    <div class="col-sm-6 col-sm-pull-12 col-sm-pull-12">
                        <label>State</label>
                        <select id="store-state-field" name="state_id" required class="form-control">
                            <option>- Select a State -</option>
                            <option value="MA">Massachusetts</option>
                            <option value="CA">California</option>
                        </select>
                    </div>
                    <div class="col-sm-6 col-sm-pull-12 col-sm-pull-12">
                        <label>Zip Code</label>
                        <input id="store-zipcode-field" type="text" name="zipcode" required class="form-control" />
                    </div>
                </div>
            </div>
        </fieldset>
    </div>
    <br>
    <div class="submit-wrapper">
        <button id="store-form-submit" type="submit" class="btn btn-primary submit-button">Save</button>
    </div>
</form>

使用Bootstrap网格的场集

1 个答案: