Question

如何在Bootstrap垂直形式中内联创建表单组？

我可以创建那些内联，但填充是凌乱的，

 <div class="form-group ">
                <div class="col-sm-6">
                    <label for="date">Date Invoice:</label>
                    <input class="form-control" placeholder="Tanggal Invoice (Harus diisi)" type="text">
                </div>
                <div class="col-sm-6" >
                    <label for="date">Date Invoice:</label>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search for...">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button">Go!</button>
                        </span>
                    </div>
                </div>
            </div>

这是小提琴：JSFIDDLE，任何帮助它如此欣赏。

Answer 1

请试试这个。

    <style>
    .form-group {
        margin-bottom: 10px;
        padding: 10px;
    }

    </style>  

  <form role="form">


            <input type="hidden" name="id" value="">

            <div class="box-body">
                <div class="form-group clearfix">
      <div class="col-sm-12">
                    <label for="bill">Bill :</label>
                    <textarea class="form-control" rows="5" id="bill" name="bill" required=""></textarea>
                </div>
</div>

                <div class="form-group clearfix">
                    <div class="col-sm-6">
                        <label for="date">Date Invoice:</label>
                        <input type="text" placeholder="Tanggal Invoice (Harus diisi)" class="form-control">
                    </div>
                    <div class="col-sm-6">
                        <label for="date">Date Invoice:</label>
                        <div class="input-group">
                            <input type="text" placeholder="Search for..." class="form-control">
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-primary">Go!</button>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="form-group clearfix">
  <div class="col-sm-12">
                    <label for="berita">Berita :</label>
                    <textarea class="form-control" rows="5" id="berita" name="berita"></textarea>
                </div>
</div>

                <div class="form-group clearfix"><div class="col-sm-12">
                    <label for="date">Detail:</label>
                    <table id="list4" class="table table-bordered">
                        <thead>
                            <tr>
                                <th style="width: 40%">Description</th>
                                <th style="width: 20%">Quantity</th>
                                <th style="width: 20%;">Price (IDR)</th>
                                <th style="width: 5%">Act</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr class="list4_var">
                                <td><input type="text" name="list4_description_0" class="form-control" required=""></td>
                                <td><input type="text" name="list4_quantity_0" class="form-control" required=""></td>
                                <td><input type="text" name="list4_price_0" class="form-control money-inputmask" required="" style="text-align: right"></td>
                                <td class="del_area04"><button class="list4_del">Delete</button></td>
                            </tr>
                        </tbody>
                    </table>
                    <a href="javascript:void(0)" class="list4_add btn btn-success">Tambah</a><br>
  </div></div>


            </div><!-- /.box-body -->

            <div class="box-footer table-responsive">
                <div class="form-group">
                    <div class="col-sm-12">
                        <div class="form-group text-center">
                            <button class="btn btn-primary " id="submit" type="submit">Submit</button>
                            <button class="btn btn-danger " type="reset">Reset</button>
                        </div>

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

            </form>

使用：

类 col-sm 在form-group和clearfix bootstrap类之后。在屏幕上我们可以将lg，sm，md，xs合并到表单字段中。

将Bootstrap形式的两个表单组垂直放入内联

1 个答案: