将HTML表单与boostrap内联

Question

现在我正在尝试使用boostrap网格系统将2个表单排成一行，但它不起作用，我也不明白为什么。我完全按照他们在文档中所说的去做，却一无所获。这是我的html代码

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"/>

<div class="container-fluid bg">
        <div class="row no-gutters">
            <div class="col-md-3"></div>
            <div class="col-md-3">
                <form class="form-container">
                    <div class="form-group">
                        <h2>Idea X</h2>
                        <h4>Descriere proiect: </h4>
                        <label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper orci nec sapien ultricies, et auctor elit molestie. Fusce non est felis.</label>
                    </div>
                    <div class="form-group">
                        <label>Limbaje folosite: </label>
                        <ul class="list-group">
                            <li class="list-group-item">HTML5</li>
                            <li class="list-group-item">CSS3</li>
                            <li class="list-group-item">JavaScript</li>
                            <li class="list-group-item">AngularJS</li>
                        </ul>
                    </div>
                        <button class="btn btn-success btn-block">Vreau sa particip</button>
                    </div>
                </form>
            </div>
            <div class="col-md-3">
                <form class="form-container">
                    <div class="form-group">
                        <h2>Idea X</h2>
                        <h4>Descriere proiect: </h4>
                        <label>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ullamcorper orci nec sapien ultricies, et auctor elit molestie. Fusce non est felis.</label>
                    </div>
                    <div class="form-group">
                        <label>Limbaje folosite: </label>
                        <ul class="list-group">
                            <li class="list-group-item">HTML5</li>
                            <li class="list-group-item">CSS3</li>
                            <li class="list-group-item">JavaScript</li>
                            <li class="list-group-item">AngularJS</li>
                        </ul>
                    </div>
                    <div>
                        <button class="btn btn-success btn-block">Vreau sa particip</button>
                    </div>
                </form>
            </div>
            <div class="col-md-3"></div>
        </div>
    </div>

任何帮助都会很棒，非常感谢

Answer 1

尝试使用<div class="row">和<div class="form-group col-xs-6">