不加 radio-inline也可以水平啊
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表單控件(復(fù)選框和單選按鈕水平排列)</title>
<link rel="stylesheet" >
</head>
<body>
<form role="form">
? ? <div class="form-group">
? ? <label class="radio-inline">
? ? ? ? <input type="radio" name="sex">男人
? ? ? ? </label>
? ? ? ? <label class="radio-inline">
? ? ? ? <input type="radio" name="sex">女人
? ? ? ? </label>
? ? ? ? <label class="radio-inline">
? ? ? ? <input type="radio" name="sex">中性
? ? ? ? </label>
? ? </div>
<div class="form-group">
? ? <label>
? ? ? ? <input type="checkbox" >男人
? ? ? ? </label>
? ? ? ? <label>
? ? ? ? <input type="checkbox" >女人
? ? ? ? </label>
? ? ? ? <label>
? ? ? ? <input type="checkbox" >中性
? ? ? ? </label>
? ? </div>
</form>
</body>
</html>
2016-06-16
你沒(méi)有給label添加class="checkbox" 這樣把label默認(rèn)為類聯(lián)元素 所以能夠水平顯示 但是這樣不規(guī)范
2016-07-05
樓上回答的很正確，我來(lái)仔細(xì)分析一下，首先看源代碼
.radio,
.checkbox {
? position: relative;
? display: block;
? margin-top: 10px;
? margin-bottom: 10px;
}然后再看看
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
? position: absolute;
? margin-top: 4px \9;
? margin-left: -20px;
}也就是說(shuō)默認(rèn)是內(nèi)聯(lián)元素，只有加上.radio,
.checkbox類時(shí)才是塊元素（也就是才換行）