如何使用以下代码使列在引导程序中工作?

时间:2019-05-02 05:24:43

标签: html css twitter-bootstrap bootstrap-4

我有一个引导程序模态,其中有一个表单,试图将其拆分为两列,但由于某种原因打赌它不起作用。

在添加一个额外的div之前,它实际上是可行的,但是我不确定为什么会造成问题。

<div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="add-task-modal" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" id="{%s kind %}-task-modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-bold text-primary" id="exampleModalLabel"><span class="label mx-2"><i class="fas fa-user-plus"></i></span>Task Settings</h5><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <!-- Smart Wizard HTML -->
                <form class="needs-validation" enctype="multipart/form-data" id="add-{%s kind %}-task-form" name="add-{%s kind %}-task-form" novalidate="true">
                    <div id="post-task-wizard">
                        <ul>
                            <li>
                                <a href="#step-1">Basic Task Settings<br></a>
                            </li>
                            <li>
                                <a href="#step-2">Select Task Profiles<br></a>
                            </li>
                            <li>
                                <a href="#step-3">Step Title<br></a>
                            </li>
                            <li>
                                <a href="#step-4">Step Title<br></a>
                            </li>
                        </ul>
                        <div class="container mt-5">
                            <div class="row" id="step-1">
                                <div class="form-group col-md-6">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                <i class="fas fa-file-signature"></i>
                                            </div>
                                        </div><input class="form-control" id="{%s kind %}-task-name" name="{%s kind %}-task-name" placeholder="Task Name" required="required" type="text">
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                        <div class="invalid-feedback in-use"></div>
                                        <div class="invalid-feedback">
                                            Please provide a Task Name
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <select class="selectpicker show-tick form-control" id="post-type" name="post-type" required="required">
                                        <option data-icon="fas fa-share-alt-square" disabled selected value="">
                                            Task Post Type
                                        </option>
                                        <option data-icon="fas fa-image" value="image">
                                            Image
                                        </option>
                                        <option data-icon="fas fa-video" value="video">
                                            Video
                                        </option>
                                        <option data-icon="fas fa-pencil-alt" value="text">
                                            Text
                                        </option>
                                    </select>
                                    <div class="valid-feedback">
                                        Looks good!
                                    </div>
                                    <div class="invalid-feedback">
                                        Please choose a Post Type
                                    </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <select class="selectpicker show-tick form-control" id="post-type" name="post-type" required="required">
                                        <option data-icon="fas fa-user" disabled selected value="">
                                            Included Account Types
                                        </option>
                                        <option data-icon="fab fa-instagram" value="instagram">
                                            Instagram
                                        </option>
                                        <option data-icon="fab fa-twitter" disabled value="twitter">
                                            Twitter
                                        </option>
                                        <option data-icon="fab fa-facebook" disabled value="facebook">
                                            FaceBook
                                        </option>
                                        <option data-icon="fab fa-tumblr" disabled value="tumblr">
                                            Tumblr
                                        </option>
                                        <option data-icon="fab fa-youtube" disabled value="youtube">
                                            Youtube
                                        </option>
                                    </select>
                                    <div class="valid-feedback">
                                        Looks good!
                                    </div>
                                    <div class="invalid-feedback">
                                        Please choose your Account Types
                                    </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <select class="selectpicker show-tick form-control" id="schedule-type" name="schedule-type" required="required">
                                        <option data-icon="fas fa-calendar-alt" disabled selected value="">
                                            Task Schedule Type
                                        </option>
                                        <option data-icon="fas fa-stopwatch" value="0">
                                            Schedule To Run Periodically
                                        </option>
                                        <option data-icon="fas fa-clock" value="1">
                                            Schedule To Run At Specific Dates/Times
                                        </option>
                                    </select>
                                    <div class="valid-feedback">
                                        Looks good!
                                    </div>
                                    <div class="invalid-feedback">
                                        Please choose a Schedule Type
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-dismiss="modal" type="button">Close</button>
            </div>
        </div>
    </div>
</div>

我正在寻找要在包含行的表格组中分成两列的表格,但是由于某种原因,它无法正常工作。任何帮助表示赞赏。谢谢。

0 个答案:

没有答案