Boostrap 4. Несколько коллапсов в одном блоке формы

Question

Я пытаюсь решить следующую проблему. У меня есть это меню

Меню

Категория, Жанр, Материал bootstrap сворачивается

Когда я нажимаю на любой из них, в результате падения -down выглядит как

Фактический результат

Но он должен быть под кнопкой.

Код:

          <div class="row" style="margin: 50px 0;">
                <form id="filter" class="form-inline">
                    <div class="form-group">
                        <input id="filter-title" class="form-control"
                               name="title"
                               type="text" placeholder="Title of item">
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-light" data-toggle="collapse"
                                data-target="#categoriesSpoiler" role="button"
                                aria-expanded="false" aria-controls="categoriesSpoiler">Categories
                        </button>
                        <div class="collapse" id="categoriesSpoiler">
                            <ul id="categories">
                            </ul>
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-light" data-toggle="collapse"
                                data-target="#genresSpoiler" role="button"
                                aria-expanded="false" aria-controls="genresSpoiler">Genres
                        </button>
                        <div class="collapse" id="genresSpoiler">
                            <ul id="genres">
                            </ul>
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="button" class="btn btn-light" data-toggle="collapse"
                                data-target="#materialsSpoiler" role="button"
                                aria-expanded="false" aria-controls="materialsSpoiler">Materials
                        </button>
                        <div class="collapse" id="materialsSpoiler">
                            <ul id="materials">
                            </ul>
                        </div>
                    </div>
                    <button id="searchItems" class="btn btn-primary" type="button">Search</button>
                </form>
            </div>

Любой помощь будет оценена. Спасибо. Думаю, проблема связана с встроенной формой. Но как я могу соединить это вместе?