Question

我有两行或更多行，每行有三个复选框。我希望它们在行之间平均排列，就像它们在表列中一样。现在，它们看起来交错，取决于文本标签的长度。如何模拟每一行的表列，以使布局看起来更有条理？

<form id="form-filter" name="form-filter" method="POST" action="/filter" class="form-inline">
                  <fieldset>
                    <legend style="margin-bottom:-10px;">Select up to 6 filters</legend>
                    <div class="control-group">
                      <div class="controls">
                        <label class="checkbox inline">
                          <input id="Medjugorje" name="Medjugorje" type="checkbox" checked>Medjugorje
                        </label>
                        <label class="checkbox inline">
                          <input id="Kibeho" name="Kibeho" type="checkbox">Kibeho
                        </label>
                        <label class="checkbox inline">
                          <input id="Lourdes" name="Lourdes" type="checkbox">Lourdes
                        </label>
                      </div>
                      <div class="controls">
                        <label class="checkbox inline">
                          <input id="Fatima" name="Fatima" type="checkbox">Fatima
                        </label>
                        <label class="checkbox inline">
                          <input id="Secrets" name="Secrets" type="checkbox">Secrets
                        </label>
                      </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Filter</button>
                    <button id="clearButton" type="button" class="btn">Clear</button>
                  </fieldset>
                </form>

Answer 1

<form id="form-filter" name="form-filter" method="POST" action="/filter">
                  <fieldset>
                    <legend>Select up to 6 filters</legend>
                    <div class="row-fluid">
                      <div class="span12">
                        <label class="checkbox span4">
                          <input id="Medjugorje" name="Medjugorje" type="checkbox" checked>Medjugorje
                        </label>
                        <label class="checkbox span4">
                          <input id="Kibeho" name="Kibeho" type="checkbox">Kibeho
                        </label>
                        <label class="checkbox span4">
                          <input id="Lourdes" name="Lourdes" type="checkbox">Lourdes
                        </label>
                      </div>
                    </div>
                    <div class="row-fluid">
                      <div class="span12">
                        <label class="checkbox span4">
                          <input id="Fatima" name="Fatima" type="checkbox" checked>Fatima
                        </label>
                        <label class="checkbox span4">
                          <input id="Banneux" name="Banneux" type="checkbox">Banneux
                        </label>
                        <label class="checkbox span4">
                          <input id="Beauraing" name="Beauraing" type="checkbox">Beauraing
                        </label>
                      </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Filter</button>
                    <button id="clearButton" type="button" class="btn">Clear</button>
                  </fieldset>
                </form>

Answer 2

<form id="form-filter" name="form-filter" method="POST" action="/filter">
    <fieldset>
        <legend>
            Select up to 6 filters
        </legend>
        <div class="row-fluid">
            <div class="span4">

                <label class="checkbox">
                    <input id="Medjugorje" name="Medjugorje" type="checkbox" checked>
                    Medjugorje </label>
                <label class="checkbox">
                    <input id="Kibeho" name="Kibeho" type="checkbox">
                    Kibeho </label>
            </div>
            <div class="span4">

                <label class="checkbox">
                    <input id="Lourdes" name="Lourdes" type="checkbox">
                    Lourdes </label>
                <label class="checkbox">
                    <input id="Fatima" name="Fatima" type="checkbox" checked>
                    Fatima </label>
            </div>
            <div class="span4">

                <label class="checkbox">
                    <input id="Banneux" name="Banneux" type="checkbox">
                    Banneux </label>
                <label class="checkbox">
                    <input id="Beauraing" name="Beauraing" type="checkbox">
                    Beauraing </label>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">
            Filter
        </button>
        <button id="clearButton" type="button" class="btn">
            Clear
        </button>
    </fieldset>
</form>

Bootstrap内联表单 - 如何使用固定宽度/跨度？

2 个答案: