当有两个带有col-lg-6的div时,如何修复Boostrap模型附带的这个奇怪的线?

时间:2017-10-08 08:45:17

标签: html twitter-bootstrap bootstrap-modal bootstrap-4

我有一个boostrap模型,当有两个带有col-lg-6的div时,我看到它有一个奇怪的线。你能告诉我为什么并帮助我解决它吗?

这是型号代码

     <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Create</h4>
        </div>
        <form method="post" id="insert_form">
            <div class="modal-body">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="Code">Code</label>
                        <input type="text" class="form-control" id="Code" name="Code" />
                    </div>
                    <div class="form-group">
                        <label for="Name">Name</label>
                        <input type="text" class="form-control" id="Name" name="Name" />
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label for="CanSale">Sale</label>
                        <input type="text" class="form-control" id="CanSale" name="CanSale" />
                    </div>

                    <div class="form-group">
                        <label for="Barcode">Barcode</label>
                        <input type="text" class="form-control" id="Barcode" name="Barcode" />
                    </div>
                    <div class="form-group">
                        <label for="Code">Descriptoin</label>
                        <input type="text" class="form-control" id="Description" name="Description" />
                    </div>
                </div> 
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
            </div>
        </form>
    </div>

下面的图像红色箭头显示我正在谈论的奇怪的线条。请帮我解决。enter image description here

1 个答案:

答案 0 :(得分:0)

我忘了放置&#34; col&#34; div <div class="row">.

内的div

我通过在col-lg-6"

内嵌套&#34; <div class="row"> </div> div来解决问题