首页 > 解决方案 > Put the 2 contents in the same row problem using with bootstrap

问题描述

I have a problem to put content in the 1 row. I have two content, it cannot put two content in the 1 row. Below is my coding:

 <div class="row">
    <div class="form-group">
        <div class="col-lg-1">
            <label>Insured First ID</label>
        </div>                                      
        <div id="input-type" class="row" style="margin-left:1px;">
            <label class="radio-inline">
                <input name="insured_first_id" id="old_ic" value="Old IC" type="radio"  style="margin-left:35%;"/><span>Old IC</span>
            </label>
            <label class="radio-inline" style="margin-left:1%;">
                <input name="insured_first_id" id="birth_cert" value="Birth Cert#" type="radio" style="margin-left:35%;"/><span>Birth Cert#</span>
            </label>
        </div>  
    </div>
    <div class="col-lg-12">
        <div class="form-group">
         <input type="text" class="form-control" id="insured_real_id" name="insured_real_id" value="" title="Insured First ID"> 
       
        </div>
    </div>
    
    <div class="form-group">
        <div class="col-lg-1">
            <label>Insured Second ID</label>
        </div>                                      
        <div id="input-type" class="row" style="margin-left:1px;">
            <label class="radio-inline">
                <input name="insured_second_id2" id="old_ic2" value="Old IC" type="radio"  style="margin-left:35%;"/><span>Old IC</span>
            </label>
            <label class="radio-inline" style="margin-left:1%;">
                <input name="insured_second_id2" id="birth_cert2" value="Birth Cert#" type="radio" style="margin-left:35%;"/><span>Birth Cert#</span>
            </label>
        </div>  
    </div>
    <div class="col-lg-12">
        <div class="form-group">
         <input type="text" class="form-control" id="insured_real_second_id" name="insured_real_second_id" value="" title="Insured Second ID">  
       
        </div>
    </div>
</div>

My output like below the picture:

output1

Actually, my expected result like below the picture,:

enter image description here

Hope someone can guide me on how to solve this problem. Thanks.

Ashiq output - edited:

enter image description here

标签: htmlinputbootstrap-4

解决方案


<div class="row">
  <div class="col-lg-6">
    <div class="form-group">
      <div class="col-lg-1">
        <label>Insured First ID</label>
      </div>
      <div id="input-type" class="row" style="margin-left:1px;">
        <label class="radio-inline">
          <input name="insured_first_id" id="old_ic" value="Old IC" type="radio" style="margin-left:35%;" /><span>Old
            IC</span>
        </label>
        <label class="radio-inline" style="margin-left:1%;">
          <input name="insured_first_id" id="birth_cert" value="Birth Cert#" type="radio"
            style="margin-left:35%;" /><span>Birth Cert#</span>
        </label>
      </div>
    </div>
    <div class="col-lg-12">
      <div class="form-group">
        <input type="text" class="form-control" id="insured_real_id" name="insured_real_id" value=""
          title="Insured First ID">

      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="form-group">
      <div class="col-lg-1">
        <label>Insured Second ID</label>
      </div>
      <div id="input-type" class="row" style="margin-left:1px;">
        <label class="radio-inline">
          <input name="insured_second_id2" id="old_ic2" value="Old IC" type="radio" style="margin-left:35%;" /><span>Old
            IC</span>
        </label>
        <label class="radio-inline" style="margin-left:1%;">
          <input name="insured_second_id2" id="birth_cert2" value="Birth Cert#" type="radio"
            style="margin-left:35%;" /><span>Birth Cert#</span>
        </label>
      </div>
    </div>
    <div class="col-lg-12">
      <div class="form-group">
        <input type="text" class="form-control" id="insured_real_second_id" name="insured_real_second_id" value=""
          title="Insured Second ID">

      </div>
    </div>
  </div>
</div>

I think this will work fine for you. I just created a row inside that row, divided col to col-lg-6 each. using container is a usual practice


推荐阅读