将文本字段并排放置在输入组Bootstarp中

Question

我是Bootstrap的新手。我正在尝试添加文本字段并排放置的输入组。但是，它不能很好地分组。我在文本字段和按钮之间得到了多余的空间。

这是我的代码：

<div class="form-group researchPapers">
    <div class="input-group">
        <div class="col-sm-12 form-group">
            <input type="text" id="title[]" name="title[]" class="form-control" placeholder="Title of Paper" />
        </div>
        <div class="col-sm-12 form-group">
            <input type="text" id="journal[]" name="journal[]" class="form-control" placeholder="Name of Journal" />
        </div>
        <div class="input-group-addon">
            <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add New</a>
        </div>
    </div>
</div>

非常感谢您的帮助。

Answer 1

从col-sm-12中删除form-group并从最后margin中删除form-group

<div class="form-group researchPapers">
    <div class="input-group">
        <div class="form-group">
            <input type="text" id="title[]" name="title[]" class="form-control" placeholder="Title of Paper" />
        </div>
        <div class="form-group">
            <input type="text" id="journal[]" name="journal[]" class="form-control" placeholder="Name of Journal" />
        </div>
        <div class="input-group-addon">
            <a href="javascript:void(0)" class="btn btn-success addMore"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add New</a>
        </div>
    </div>
</div>

CSS

.input-group .form-group:nth-child(2) {
    margin-bottom: 0;
}

Answer 2

您可以尝试执行此操作，但问题是您不能获得一个以上的额外文本字段，因为它将超出div

这里是代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<div class="container">
    <div class="panel panel-danger">
        <div class="panel-body">
            <form id="test_form">
                <div class="row">
                    <div class="col-sm-12 form-group">
                        <label for="name">Published Research Articles</label>
                    </div>
                </div>

                <div class="form-group researchPapers">
                    <div class="input-group" id="form">
                        <div class="col-sm-12 form-group">
                            <input type="text" id="title[]" name="title[]" class="form-control" placeholder="Title of Paper" />
                        </div>
                        <div class="col-sm-4 form-group">
                            <input type="text" id="journal[]" name="journal[]" class="form-control" placeholder="Name of Journal" />
                        </div>
                        <div class="col-sm-2 form-group">
                            <input type="text" id="vol[]" name="vol[]" class="form-control" placeholder="Volume" />
                        </div>
                        <div class="col-sm-2 form-group">
                            <input type="text" id="issue[]" name="issue[]" class="form-control" placeholder="Issue" />
                        </div>
                        <div class="col-sm-2 form-group">
                            <input type="text" id="pages[]" name="pages[]" class="form-control" placeholder="Pages" />
                        </div>
                        <div class="col-sm-2 form-group">
                            <input type="text" id="year[]" name="year[]" class="form-control" placeholder="Year" />
                        </div>
                        <div class="input-group-addon">
                            <a href="#" class="btn btn-success addMore" id="Add"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add New</a>
                        </div>
                    </div>
                </div>
                <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function()
        {
            $('#Add').on('click',function()
                {
                    $('#form').append('<div class="col-sm-12 form-group"><input type="text" id="title[]" name="title[]" class="form-control" placeholder="Title of Paper" /></div><div class="col-sm-4 form-group"><input type="text" id="journal[]" name="journal[]" class="form-control" placeholder="Name of Journal" /></div><div class="col-sm-2 form-group"><input type="text" id="vol[]" name="vol[]" class="form-control" placeholder="Volume" /></div><div class="col-sm-2 form-group"><input type="text" id="issue[]" name="issue[]" class="form-control" placeholder="Issue" /></div><div class="col-sm-2 form-group"><input type="text" id="pages[]" name="pages[]" class="form-control" placeholder="Pages" /></div><div class="col-sm-2 form-group"><input type="text" id="year[]" name="year[]" class="form-control" placeholder="Year" /></div><div class="input-group-addon"><a href="#" class="btn btn-success addMore" id="Add"><span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add New</a></div></div></div>')
                });
        });
</script>