Css 按钮不存在'；“不要呆在表格内”；卡片“；

我正在努力提高我的Bootsrap技能，但需要帮助解决有关卡片和表单的问题

尝试将表单放入卡中，但未能成功。有人知道这个问题吗

<div class="row row-content col-sm-8">
        <div class="card">
            <h3 class="card-header card-warning" style="width: 100%">Featured</h3>
            <form class="form-group col-sm-12 row">
                <div class="col col-md-3 col-sm-3">
                    <label><strong>Number of Guests</strong></label>
                </div>
                <div class="col col-md-9 col-sm-9 align-items-center">
                    <label class="radio-inline">
                                                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
                                            </label>
                </div>
                <div class="col-xs-12 col-sm-3 align-items-center">
                    <p style="padding: 10px"></p>
                    <p><strong>Date and Time</strong></p>
                </div>
                <div class="col-sm-9 col-md-9 form-inline">
                    <label class="sr-only" for="inlineFormInput">Date</label>
                    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Date">

                    <label class="sr-only" for="inlineFormInputGroup">Time</label>
                    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Time">
                    </div>
                </div>
                <div class="col-sm-3">
                </div>
                <div class="col col-offset">
                    <a class="btn btn-primary" href="#">Reserve</a>
                </div>

            </form>
        </div>

    </div>

作为特色的
客人人数
1.

日期和时间

日期
时间

预订按钮停留在卡的外面，为什么表单不适合这里的卡？

---

按钮也应该在卡中。

我通过这样更改代码解决了这个问题

<div class="row-content col-sm-8">
        <div class="card">
            <h3 class="card-header card-warning" style="width: 100%">Featured</h3>
            <form class="col-sm-12 row">
                <div class="col-xs-12 col-sm-3 align-items-center">
                    <label><strong>Number of Guests</strong></label>
                </div>
                <div class="col-sm-9 col-md-9 input-group">
                    <label class="radio-inline" style="padding-left:">
                                                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
                                            </label>
                    <label class="radio-inline">
                                                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
                                            </label>
                    <label class="radio-inline">
                                                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
                                            </label>
                    <label class="radio-inline">
                                                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 4
                                            </label>
                    <label class="radio-inline">
                                                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 5
                                            </label>
                    <label class="radio-inline">
                                                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 6
                                            </label>
                </div>
                <div class="col-xs-12 col-sm-3 align-items-center">
                    <p style="padding: 10px"></p>
                    <p><strong>Date and Time</strong></p>
                </div>
                    <div class="col-sm-9 col-md-9 input-group align-items-center row">
                        <div class="col-sm-6">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-calendar-o fa-fw"></i></span></span>
                                <input type="text" class="form-control" aria-label="Date" placeholder="Date">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-clock-o fa-fw"></i></span></span>
                                <input type="text" class="form-control" aria-label="Text input with radio button" placeholder="Time">
                            </div>
                        </div>
                    </div>
                <div class="col-sm-3">
                </div>
                <div class="col col-offset">
                    <a class="btn btn-primary" href="#">Reserve</a>
                </div>

            </form>
        </div>

    </div>

作为特色的
客人人数
1.
2.
3.
4.
5.
6.

日期和时间

我通过这样更改代码解决了这个问题

<div class="row-content col-sm-8">
        <div class="card">
            <h3 class="card-header card-warning" style="width: 100%">Featured</h3>
            <form class="col-sm-12 row">
                <div class="col-xs-12 col-sm-3 align-items-center">
                    <label><strong>Number of Guests</strong></label>
                </div>
                <div class="col-sm-9 col-md-9 input-group">
                    <label class="radio-inline" style="padding-left:">
                                                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
                                            </label>
                    <label class="radio-inline">
                                                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
                                            </label>
                    <label class="radio-inline">
                                                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
                                            </label>
                    <label class="radio-inline">
                                                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 4
                                            </label>
                    <label class="radio-inline">
                                                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 5
                                            </label>
                    <label class="radio-inline">
                                                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 6
                                            </label>
                </div>
                <div class="col-xs-12 col-sm-3 align-items-center">
                    <p style="padding: 10px"></p>
                    <p><strong>Date and Time</strong></p>
                </div>
                    <div class="col-sm-9 col-md-9 input-group align-items-center row">
                        <div class="col-sm-6">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-calendar-o fa-fw"></i></span></span>
                                <input type="text" class="form-control" aria-label="Date" placeholder="Date">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="input-group">
                                <span class="input-group-addon"><i class="fa fa-clock-o fa-fw"></i></span></span>
                                <input type="text" class="form-control" aria-label="Text input with radio button" placeholder="Time">
                            </div>
                        </div>
                    </div>
                <div class="col-sm-3">
                </div>
                <div class="col col-offset">
                    <a class="btn btn-primary" href="#">Reserve</a>
                </div>

            </form>
        </div>

    </div>

作为特色的
客人人数
1.
2.
3.
4.
5.
6.

日期和时间