Question

我在下面的代码中使用的字段多于7个按钮字段

<div class="panel-body">
                <div class="row">
                        <div class="col-xs-12 ">
                        <fieldset  class="well well-sm"><legend class="k-widget">main part1</legend><br>


                            <div class="col-xs-12 col-sm-3">
                                <label class="control-label" for="AppEducSclName">Name1: <field here >...... </div>

对于接下来的7个或更多字段也是如此。

我以分散的方式获取我的字段意味着不是内联，我希望我的前四个字段在第一行然后接下来的四个在第二行中然后......但是使用此代码显得分散。

Answer 1

编辑：我试图修改你提供的代码，它将4个表格连成一行，然后是下一行中的4个等等（在移动屏幕上，表格将被堆叠以适合屏幕）

请参阅我的示例：https://jsfiddle.net/vvp5rey8/

以下是代码：

<div class="panel-body">
<div class="row">
<div class="col-xs-12 ">

<fieldset  class="well well-sm"><legend class="k-widget">main part1</legend> <br>

<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">
Name1: <field here >...... 
</div>

<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">
Name2: <field here >...... 
</div>

<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">
Name3: <field here >...... 
</div>

<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">
Name4: <field here >...... 
</div>

<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">
Name5: <field here >...... 
</div>

<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">
Name6: <field here >...... 
</div>

<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">
Name7: <field here >...... 
</div>

<div class="col-xs-12 col-sm-3">
<label class="control-label" for="AppEducSclName">
Name8: <field here >...... 
</div>


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

这就是你要找的东西吗？

引导网格和7个字段或更多的列

1 个答案: