Bootstrap4：如何将行组合成单列或如何在引导程序中给出行跨度

Question

您好，我有这样的要求。

我将选中 LCM 复选框上的 LCM 信息框。 下面是我的代码。

<div class="panel-body ">
          
          <div class="col-md-4 col-sm-4 col-xs-12 "></div>
           <div class="col-md-4 col-sm-4 col-xs-12 ">
              <input type="checkbox" id="validationTypeFunctional" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="Functional"/>
											<label>Functional</label>
            </div>
            
           <div class="col-md-4 col-sm-4 col-xs-12" >
           <div class="col-sm-6 col-xs-12 required">
              <label class="control-label">LCM Deployment</label>
              <select class="form-control" id="lcmDeployment" >
              <option value="" >Please Select an option</option>
                                  <option value="With Orchestration"> With Orchestration</option>
                                         <option value="Without Orchestration">Without Orchestration</option>
                                         </select>                      
            </div>   
             <div class="col-sm-6 col-xs-12 required">
              <label class="control-label">Workflow Type</label>
              <select class="form-control" id="workflowType" >
              <option value="" >Please Select an option</option>
                                  <option value="Legacy">Legacy(Hot)</option>
                                         <option value="Tosca">Tosca</option>
                                         </select>                      
            </div>
             <div class="col-sm-6 col-xs-12 ">
              <label class="control-label">Verified Workflows</label>
              <input type="text" class="form-control" id="verifiedWorkflow"/>
            </div> 
            <div class="col-sm-6 col-xs-12 ">
              <label class="control-label">Workflow RPM-Package</label>
              <input type="text" class="form-control" id="workflowRPMPackage"/>
            </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12 ">            
              <input type="checkbox" id="validationTypeCertification" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="Certification"/>
											<label style="font-weight:bold">Certification</label>
            </div>
           <div class="col-md-4 col-sm-4 col-xs-12  ">
               <input type="checkbox" id="validationTypeLCM" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="LCM" />
											<label>LCM</label>
            </div>
            
            <div class="col-md-4 col-sm-4 col-xs-12 ">&nbsp;</div>
             <div class="col-md-4 col-sm-4 col-xs-12 ">&nbsp;</div>
              <div class="col-md-4 col-sm-4 col-xs-12 ">&nbsp;</div>
             <div class="col-md-4 col-sm-4 col-xs-12">
               <input type="checkbox" id="validationTypePerformance" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="Performance"  />
											<label>Performance</label>
            </div>
             <div class="col-md-4 col-sm-4 col-xs-12 ">&nbsp;</div>
              <div class="col-md-4 col-sm-4 col-xs-12 ">&nbsp;</div>
            <div class="col-md-4 col-sm-4 col-xs-12 ">
               <input type="checkbox" id="validationTypeSystemVerification" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="System verification" />
											<label style="font-weight:bold">System verification</label>
            </div> 
            <div class="col-md-4 col-sm-4 col-xs-12 ">
               <input type="checkbox" id="validationTypeResilience" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="Resilience" />
											<label>Resilience</label>
            </div> 
             <div class="col-md-4 col-sm-4 col-xs-12 ">&nbsp;</div>
              <div class="col-md-4 col-sm-4 col-xs-12 ">&nbsp;</div>
           <div class="col-md-4 col-sm-4 col-xs-12 ">
               <input type="checkbox" id="validationTypeSecurity" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="Security" />
											<label>Security</label>
            </div>
             <div class="col-md-4 col-sm-4 col-xs-12 ">&nbsp;</div>
              <div class="col-md-4 col-sm-4 col-xs-12 ">&nbsp;</div>
            <div class="col-md-4 col-sm-4 col-xs-12">
              <label class="control-label">Validation Results</label>
              <!--<input type="text" class="form-control">-->
                       <select class="form-control" id="validationResults" >
                                         <option value=" " >Please select an option</option>
                                         <option value="Completed" >Completed</option>
                                         <option value="Completed with restrictions">Completed with restrcitions</option>
                                         <option value="Incompatible" >Incompatible</option>
                                    </select>
            </div>  
          </div>
        </div>

但是对齐不正确。我无法合并/合并列中的行。它只显示在单行中并且对齐混乱了。

需要帮助才能获得所需的输出。

Answer 1

这是基本结构，您可以通过 padding/margin 设置样式以获得您想要的确切外观...

$(document).ready(function() {
  $("#validationTypeLCM").click(function() {
    if (this.checked) {
      $("#box3").addClass("boxShow");
      $("#box3").removeClass("boxHide");
    } else {
      $("#box3").addClass("boxHide");
      $("#box3").removeClass("boxShow");
    }
  });
});

.myBorder {
  border: 1px solid #000
}

.box1Spacing {
  margin-top: 20px;
}

.boxHide {
  display: none;
}

.boxShow {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="row">

  <!-- Box 1 -->
  <div class="col-md-5 col-sm-4 col-xs-12 ">
    <div class='box1Spacing'>
      <input type="checkbox" id="validationTypeCertification" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="Certification" />
      <label style="font-weight:bold">Certification</label>
    </div>
    <div class='box1Spacing'>
      <input type="checkbox" id="validationTypeSystemVerification" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="System verification" />
      <label style="font-weight:bold">System verification</label>
    </div>
    <div class='box1Spacing'>
      <select class="form-control" id="lcmDeployment">
        <option value="">Please Select an option</option>
        <option value="With Orchestration"> With Orchestration</option>
        <option value="Without Orchestration">Without Orchestration</option>
      </select>
    </div>
  </div>

  <!-- Box 2 -->
  <div class="col-md-2 col-sm-3 col-xs-12 ">
    <input type="checkbox" id="validationTypeFunctional" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="Functional" />
    <label>Functional</label> <br/>
    <input type="checkbox" id="validationTypeLCM" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="LCM" />
    <label>LCM</label> <br/>
    <input type="checkbox" id="validationTypePerformance" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="Performance" />
    <label>Performance</label> <br/>
    <input type="checkbox" id="validationTypeResilience" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="Resilience" />
    <label>Resilience</label> <br/>
    <input type="checkbox" id="validationTypeSecurity" name="validationTypesDone" style="width:15px;height:15px;margin-right:20px" value="Security" />
    <label>Security</label> <br/>
  </div>

  <!-- Box 3 -->
  <div id='box3' class="col-md-5 col-sm-5 col-xs-12 boxHide ">
    <b>LCM Information</b>
    <div class='row'>
      <div class="col-md-6 col-sm-6 col-xs-12 myBorder">
        <label class="control-label">LCM Deployment</label>
        <select class="form-control" id="lcmDeployment">
          <option value="">Please Select an option</option>
          <option value="With Orchestration"> With Orchestration</option>
          <option value="Without Orchestration">Without Orchestration</option>
        </select>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12 myBorder">
        <label class="control-label">Workflow Type</label>
        <select class="form-control" id="workflowType">
          <option value="">Please Select an option</option>
          <option value="Legacy">Legacy(Hot)</option>
          <option value="Tosca">Tosca</option>
        </select>
      </div>
    </div>
    <div class='row'>
      <div class="col-sm-6 col-xs-12 ">
        <label class="control-label">Verified Workflows</label>
        <input type="text" class="form-control" id="verifiedWorkflow" />
      </div>
      <div class="col-sm-6 col-xs-12 ">
        <label class="control-label">Workflow RPM-Package</label>
        <input type="text" class="form-control" id="workflowRPMPackage" />
      </div>
    </div>
  </div>

</div>

更新：根据下面提问者的评论