Поместите текстовые поля рядом в группу ввода 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

Вы можете попробовать это, но проблема в том, что вы не можете получить более одного дополнительного текстового поля, потому что оно будет больше 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> 

Answer 2

Удалено 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;
}

Для общего представления о множественных входах (используйте bootstrap 4 класса для гибкого, я даю общее представление)

<div class="form-group">
            <input type="text" id="journal[]" name="journal[]" class="form-control" placeholder="Name of Journal" style="
    flex-basis: 1;
"><input type="text" id="journal[]" name="journal[]" class="form-control" placeholder="Name of Journal"><input type="text" id="journal[]" name="journal[]" class="form-control" placeholder="Name of Journal"><input type="text" id="journal[]" name="journal[]" class="form-control" placeholder="Name of Journal">
        </div>

CSS

.input-group .form-group:nth-child(2) {
    margin-bottom: 0;
    display: flex;
}
.input-group .form-group:nth-child(2) input + input {
    margin-left: 15px;
}