按钮不会留在窗体“卡”内

Question

我正在努力提高我的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>

保留按钮保留在卡外，为什么表单不适合卡？

按钮也应该在卡片中..

Answer 1

我解决了这个问题，就像更改这样的代码。

+---------+----------+
| column  | headings |
+---------+----------+
| 1st row | values   |
| 2nd row | values   |
| ...     | ...      |
+---------+----------+