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

原创 新起点博客  2022-06-23 15:56 
【上云必备】上云仅?102/年

在使用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;
}

 

本文地址:https://www.henenseo.com/archives/4692
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论

您必须 登录 才能发表留言!