Question

我使用bootstrap制作了5行，它们整齐排列，但是有一个小问题。行没有任何间隙地接触。我不应该使用
，这会带来很大的差距，并且每行中的文本框应该是垂直对齐的，如果该行中没有单选按钮，则相应的位置应该保持为空，文本框应该正确对齐所有行。所有行中的起始文本框应从第一行文本框开始的相同位置开始。这是我的代码

    <div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="form-inline">
                <div class="radio" style="width: 100px;">
                    <label><input type="radio" name="optradio">Option
                        1</label>
                </div>
                <input type="text" class="form-control" />

            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <div class="form-inline">
                <div class="radio" style="width: 100px;">
                    <label><input type="radio" name="optradio">Option
                        1</label>
                </div>
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" />
                <div class="form-group">
                    <label for="sel1">Select list:</label> <select
                        class="form-control" id="sel1">
                        <option>Apple</option>
                        <option>Mango</option>
                        <option>Orange</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <div class="form-inline">
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" /> <input type="text" class="form-control" />
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="form-inline">
                <div class="radio" style="width: 100px;">
                    <label><input type="radio" name="optradio">Option
                        1</label>
                </div>
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" />
                <div class="form-group">
                    <label for="sel1">Select list:</label> <select
                        class="form-control" id="sel1">
                        <option>Apple</option>
                        <option>Mango</option>
                        <option>Orange</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <div class="form-inline">
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" /> <input type="text" class="form-control" />
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" />
            </div>
        </div>
    </div>
</div>

请检查浏览器而不是小提琴，因为它会更改对齐方式。

Answer 1

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="form-inline form-group">
                <div class="radio" style="width:95px;" >
                    <label><input type="radio" name="optradio" style="vertical-align:middle;"> &nbsp; Option
                        1</label>
                </div>
                <input type="text" class="form-control" />

            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <div class="form-inline form-group">
                <div class="radio" style="width:95px;" >
                    <label><input type="radio" name="optradio">Option
                        1</label>
                </div>
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" />
                <div class="form-group">
                    <label for="sel1">Select list:</label> <select
                        class="form-control" id="sel1">
                        <option>Apple</option>
                        <option>Mango</option>
                        <option>Orange</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 col-md-offset-1">
            <div class="form-inline form-group">
          
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" /> <input type="text" class="form-control" />
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" />
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="form-inline form-group">
                <div class="radio" style="width:95px;">
                    <label><input type="radio" name="optradio">Option
                        1</label>
                </div>
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" />
                <div class="form-group">
                    <label for="sel1">Select list:</label> <select
                        class="form-control" id="sel1">
                        <option>Apple</option>
                        <option>Mango</option>
                        <option>Orange</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12 col-md-offset-1">
            <div class="form-inline form-group">
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" /> <input type="text" class="form-control" />
                <input type="text" class="form-control" /> <input type="text"
                    class="form-control" />
            </div>
        </div>
    </div>
</div>

这是JSFIDDLE

使用引导类

1 个答案: