欢迎光临
我们一直在努力

Bootstrap教程:表单控件(复选框和单选按钮水平排列)

在使用bootstrap框架的时候为了布局的需要,会将复选框和单选按钮需要水平排列。大家不用担心Bootstrap框架也做了这方面的考虑:

Bootstrap教程

知识点:

1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”

 

演示代码:

<form role="form">
  <div class="form-group">
    <label class="checkbox-inline">
      <input type="checkbox"  value="option1">游戏
    </label>
    <label class="checkbox-inline">
      <input type="checkbox"  value="option2">摄影
    </label>
    <label class="checkbox-inline">
    <input type="checkbox"  value="option3">旅游
    </label>
  </div>
  <div class="form-group">
    <label class="radio-inline">
      <input type="radio"  value="option1" name="sex">男性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option2" name="sex">女性
    </label>
    <label class="radio-inline">
      <input type="radio"  value="option3" name="sex">中性
    </label>
  </div>
</form>

实现CSS源码请查看bootstrap.css文件第1767行~第1780行:

.radio-inline,
.checkbox-inline {
display: inline-block;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
vertical-align: middle;
cursor: pointer;
}
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
margin-top: 0;
margin-left: 10px;
}

 

赞(0) 打赏
未经允许不得转载:新起点博客 » Bootstrap教程:表单控件(复选框和单选按钮水平排列)

评论 抢沙发

评论前必须登录!