Question

我在使用Bootstrap FORM元素工作/显示时遇到了一些麻烦。

我在这里阅读了如何在form-inline中嵌入form-group（在另一个父form-group内）

这让我有点＆＃39;内联内容..但间距和内容已关闭。

我是这个＆＃39; Bootstrap＆＃39;的新手。网格/布局的风格..所以它可能是明显或愚蠢的东西。

以下是我的代码以获取上述内容：

<!-- Organization -->
            <div class="form-group">
                <label for="inputOrganization" class="col-sm-12">Organization <span style="font-size:11px;">(labels on top/full width)</span></label>
                <div class="col-sm-12">
                    <input type="text" class="form-control" id="inputOrganization" placeholder="Organization" name="organization">
                </div>
            </div>
            <!-- Contact Person -->
            <div class="form-group">
                <label for="inputContactPerson" class="col-sm-12">Contact Person <span style="font-size:11px;">(labels on top/full width)</span></label>
                <div class="col-sm-12">
                    <input type="text" class="form-control" id="inputContactPerson" placeholder="ContactPerson" name="contactperson">
                </div>
            </div>



            <div class="form-group col-sm-12">              
                <div class="form-inline">
                    <div class="form-group col-sm-6">
                        <label for="inputCity">City</label><br>
                        <input type="text" class="form-control col-sm-6" id="inputCity" placeholder="City" name="city" style="width:100%;">
                    </div>
                    <div class="form-group col-sm-6">
                        <label for="inputState">State</label><br>
                        <input type="text" class="form-control col-sm-6" id="inputState" placeholder="State" name="state" style="width:100%;">
                    </div>                      
                </div>                          
            </div>

我的问题是......我无法弄清楚以下内容：

城市＆amp;州＆＃39;标签＆＃39;在字段顶部
城市＆amp;州立大学有一个空间＆＃39;他们之间（没有像图像中那样彼此对接）
城市＆amp;状态字段应各自为50％宽度..以便所有其他字段开始的城市字段STARTS ...和所有其他字段结束的状态字段ENDS *（在显示的图像中...内联字段和状态字段之间没有空格不延伸到上述联系人字段结束的地方）

我该如何做到这一点？

bootstrap混合水平和内联内容

0 个答案: