html - 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:
Actually, my expected result like below the picture,:
Hope someone can guide me on how to solve this problem. Thanks.
Ashiq
output - edited:
解决方案
<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
推荐阅读
- python - 导入模块,当多个(子)文件夹具有相同名称时
- .net - 为什么在 SelectMany 中引发异常后我的进程仍然存在,而类似 rx 运算符中的异常导致未处理的异常?
- javascript - 如何设置公共 Google Cloud Storage 存储桶的 CORS 以避免使用 javascript 提取功能时出错?
- ios - 定义一个不会被取消引用的委托?
- android - 为 android 项目设置 azure devops 构建管道的问题
- vb.net - (InvalidCastException):指定的强制转换无效
- c# - C#,如果另一个方法返回 true,则启动方法
- forms - I have this code, when submited the form dont refresh, someone know how refresh after submit on october cms?
- python - SWIG 和 Boost::variant
- bash - 使用 find 查找与带有可选组的正则表达式匹配的文件夹