我有一个引导程序模态,其中有一个表单,试图将其拆分为两列,但由于某种原因打赌它不起作用。
在添加一个额外的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">×</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>
我正在寻找要在包含行的表格组中分成两列的表格,但是由于某种原因,它无法正常工作。任何帮助表示赞赏。谢谢。