blocks|key|2445687|text|在中添加一个将处理复选框边距的类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2445688|+<div+class="container-fluid">
++<div+class="row-fluid">
++++<div+class="span3">
++++++<label>label+1</label>
++++++<input+type="text"+/>
++++</div>
++++<div+class="span3">
++++++<label>label+2</label>
++++++<input+type="text"+/>
++++</div>
++++<div+class="span3+checkbox">
++++++++<input+type="checkbox"+/>test+description
++++</div>
++</div>
</div>|code-block|syntax|javascript|2445689|在您的CSS中|offset|length|style|BOLD|2445690|input[type="checkbox"]+{
+//+i+just+remove+this+part..
}
.checkbox+{
++margin:+30px+0+0+0;
}|2445691|不要将页边距放在复选框上，而是放在父div上。看看这个jsFiddle。|2445692|希望这能有所帮助|2445693|entityMap|0|LINK|mutability|MUTABLE|url|http://jsbin.com/EYiTar/1/edit?html,css,output^0|0|0|3|3|0|0|R|8|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@$I|13|J|14|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@]|9|@$I|17|J|18|1|19]]|A|$]]|$1|Q|3|R|5|6|7|1A|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>In your <strong>HTML</strong> add a class that will handle the checkbox margin:</p>

<pre><code> &lt;div class="container-fluid"&gt;
  &lt;div class="row-fluid"&gt;
    &lt;div class="span3"&gt;
      &lt;label&gt;label 1&lt;/label&gt;
      &lt;input type="text" /&gt;
    &lt;/div&gt;
    &lt;div class="span3"&gt;
      &lt;label&gt;label 2&lt;/label&gt;
      &lt;input type="text" /&gt;
    &lt;/div&gt;
    &lt;div class="span3 checkbox"&gt;
        &lt;input type="checkbox" /&gt;test description
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and in your <strong>CSS</strong>:</p>

<pre><code>input[type="checkbox"] {
 // i just remove this part..
}
.checkbox {
  margin: 30px 0 0 0;
}
</code></pre>

<p>Don't put the margin on the checkbox, but on the parent div.
Check this <a href="http://jsbin.com/EYiTar/1/edit?html,css,output" rel="noreferrer">jsFiddle</a>. </p>

<p>Hope this helps</p>


blocks|key|1367971|text|试着经常使用这样的东西：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1367972|<div+class="span3">
++++<label+for="checkbox"+class="checkbox">
++++++++<input+type="checkbox"+id="checkbox"+class="checkbox">test+description
++++</label>
</div>|code-block|syntax|javascript|1367973|http://jsbin.com/itAdAWA/1/edit|offset|length|1367974|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|V|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>Try to always use something like this:</p>

<pre><code>&lt;div class="span3"&gt;
    &lt;label for="checkbox" class="checkbox"&gt;
        &lt;input type="checkbox" id="checkbox" class="checkbox"&gt;test description
    &lt;/label&gt;
&lt;/div&gt;
</code></pre>

<p><a href="http://jsbin.com/itAdAWA/1/edit" rel="noreferrer">http://jsbin.com/itAdAWA/1/edit</a></p>


blocks|key|2445647|text|把一个<label>放在这样的复选框前怎么样？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2445648|<div+class="container-fluid">
++++<div+class="row-fluid">
++++++<div+class="span3">
++++++++<label>label+1</label>
++++++++<input+type="text">
++++++</div>
++++++<div+class="span3">
++++++++<label>label+2</label>
++++++++<input+type="text">
++++++</div>
++++++<div+class="span3">
++++++++<label>test</label>
++++++++<input+type="checkbox">
++++++</div>
++++</div>
++</div>|code-block|syntax|javascript|2445649|启动：http://bootply.com/86998|2445650|entityMap|0|LINK|mutability|MUTABLE|url|http://bootply.com/86998^0|3|7|0|0|3|O|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>How about putting a <code>&lt;label&gt;</code> before the checkbox like this? ..</p>

<pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row-fluid"&gt;
      &lt;div class="span3"&gt;
        &lt;label&gt;label 1&lt;/label&gt;
        &lt;input type="text"&gt;
      &lt;/div&gt;
      &lt;div class="span3"&gt;
        &lt;label&gt;label 2&lt;/label&gt;
        &lt;input type="text"&gt;
      &lt;/div&gt;
      &lt;div class="span3"&gt;
        &lt;label&gt;test&lt;/label&gt;
        &lt;input type="checkbox"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</code></pre>

<p>Bootply: <a href="http://bootply.com/86998" rel="nofollow">http://bootply.com/86998</a></p>


blocks|key|2445729|text|我刚刚解决了这个问题，在引导3，通过简单的限制高度的内联复选框12个像素。它们是默认的40‘t，我不知道为什么！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2445730|<div+class="checkbox-inline">
++++<label>
++++++++<input+type="checkbox"+checked="checked"+/>
++++++++<span>My+correctly+aligned+check-box</span>
++++</label>
</div>|code-block|syntax|javascript|2445731|将此添加到css文件中(我个人有一个名为bootstrap-custom.css的css文件)：|2445732|/*
Checkboxes+in+inline+forms+are+misaligned+because+for+an+unknow+reason+they+inherit+a+height+of+40px+!
This+selector+limit+the+height+of+inline+checkboxes+to+12px+which+is+the+perfect+value+to+align+them+to
the+other+widgets+in+an+inline+form.
*/
.radio-inline,+.checkbox-inline+{
++++max-height:+12px;
}|2445733|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I just solved this exact problem in bootstrap 3, by simply limiting the height of inline checkboxes to 12 pixels. They are by default 40px, I don't know why !</p>

<pre><code>&lt;div class="checkbox-inline"&gt;
    &lt;label&gt;
        &lt;input type="checkbox" checked="checked" /&gt;
        &lt;span&gt;My correctly aligned check-box&lt;/span&gt;
    &lt;/label&gt;
&lt;/div&gt;
</code></pre>

<p>add this in your css file (I personally have a css file named bootstrap-custom.css):</p>

<pre><code>/*
Checkboxes in inline forms are misaligned because for an unknow reason they inherit a height of 40px !
This selector limit the height of inline checkboxes to 12px which is the perfect value to align them to
the other widgets in an inline form.
*/
.radio-inline, .checkbox-inline {
    max-height: 12px;
}
</code></pre>


blocks|key|261729|text|不是理想的解决方案，而是将您的代码更改为..。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|261730|<div+class="span5">
++++<input+type="checkbox">test+description</input>
++</div>|code-block|syntax|javascript|261731|并在上面加一个边距。我会得到你想要的结果-更好。|261732|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Not ideal solution but change your code to ...</p>

<pre><code>&lt;div class="span5"&gt;
    &lt;input type="checkbox"&gt;test description&lt;/input&gt;
  &lt;/div&gt;
</code></pre>

<p>and set the margin-top on that.  I will result as you want - better.</p>


<p>Using Bootstrap version 2.3.2, I have a form layout like the below image and since the checkbox has an inline label, there is an aligning issue.</p>

<p><img src="https://i.stack.imgur.com/7fAvg.png" alt="enter image description here"></p>

<p>Adding margin to <code>input[type="checkbox"]</code> only gives margin to the checkbox, not the inline label. How do I make it so the checkbox and its label vertically align to the text fields next to it?</p>

<p>Here is the 
<a href="http://jsbin.com/ifeJURO/1/edit" rel="noreferrer">JS BIN</a> if you are interested.</p>


Bootstrap checkbox input align vertically

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

使用Bootstrap版本2.3.2，我有一个表单布局，类似于下面的图像，而且由于复选框有一个内联标签，因此存在对齐问题。​​向input[type="checkbox"]添加页边距只会给复选框留出页边距，而不是内联标签。如何使复选框及其标签垂直对齐其旁边的文本字段？这是，如果您感兴趣的话。

问引导复选框输入垂直对齐
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导复选框输入垂直对齐EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导复选框输入垂直对齐
EN