引导程序4中<legend>标记和网格系统的样式问题

时间:2017-04-15 14:42:49

标签: css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 twitter-bootstrap-4

[它应该以这种方式显示。相反] ...... 1 [以这种方式显示。请参阅“水果未对齐”一词] 2

我使用的是Bootstrap 4 alpha v6。这是代码

<fieldset class="form-group row">
    <div class="col-sm-3"><legend class="col-form-legend">Fruit</legend></div>
    <div class="offset-sm-3 col-sm-9">
        <div class="form-check row">
            <label class="form-check-label">
                <input class="form-check-input" type="radio" name="legendradio" id="legendradio1" value="1">Apple
            </label>
        </div>
        <div class="form-check row">
            <label class="form-check-label">
                <input class="form-check-input" type="radio" name="legendradio" id="legendradio2" value="2">Orange
            </label>    
        </div>
        <div class="form-check row">
            <label class="form-check-label">
                <input type="radio" class="form-check-input" name="legendradio" id="legendradio3" value="1">Watermelon
            </label>
        </div>
    </div>
</fieldset>

1 个答案:

答案 0 :(得分:0)

通过向以下类添加类来填充以下html元素:

<div class="col-sm-3 padding"><legend class="col-form-legend">Fruit</legend></div>

<fieldset class="form-group row padding">

CSS:.padding {padding:Npx}