freeCodeCamp 栅格实战用 Bootstrap 的 col-xs-6 让 Radio Buttons 自适应布局【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本指南围绕 freeCodeCamp 开源仓库中 Bootstrap 模块的经典关卡Responsively Style Radio Buttons展开讲解如何把「12 列栅格系统」应用到表单元素上将一对单选框分别放进col-xs-6列使它们在任意屏幕宽度下都平分一整行、均匀分布。读完本文你将掌握rowcol-*-*栅格对表单控件的套用方式、freeCodeCamp 关卡文档frontmatter 描述 测试 种子代码 参考答案的结构以及通过仓库中的关卡源码、结构 JSON 与相邻关卡串起的前后知识链。一、这一关要解决什么问题关卡原文描述对应 curriculum/challenges/english/blocks/bootstrap/bad87fee1348bd9aedb08845.md 第 13-19 行写得很直白You can use Bootstrapscol-xs-*classes onformelements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is.也就是说Bootstrap 栅格类不仅能用在图片、按钮上同样适用于form表单里的元素。如果把一对单选按钮各自放进一列栅格它们就能在任意屏幕宽度下都平分一行、保持均匀间距而不是挤在表单左侧。关卡任务拆解把两个radio单选按钮一起嵌套进一个div classrow再把每个单选按钮分别嵌套进一个div classcol-xs-6。关卡特意提示单选按钮本质上是typeradio的input元素。这是后面理解测试断言、理解「栅格加在包裹层而非 input 本身」的关键。二、为什么 col-xs-6 能做到「无论分辨率多宽都均匀分布」freeCodeCamp 这一 Bootstrap 模块固定在 Bootstrap 3 之上。仓库的模块定义文件 curriculum/structure/blocks/bootstrap.json 第 5-8 行的required字段明确声明了版本required: [ { link: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css } ]即该模块所有关卡运行在 Bootstrap3.3.7的 CSS 之上。理解下面三点就理解了本关的「为什么」栅格一共 12 列col-xs-6表示占据 6 / 12 50% 的宽度。两个col-xs-6恰好填满一行 12 列。col-xs-是永远生效的最小屏类*Bootstrap 3 是移动优先设计col-xs-*不依赖任何媒体查询断点从最小屏到最大屏都按百分比宽度生效而col-sm-*、col-md-*、col-lg-*分别要到更宽的视口才生效。因此这里选col-xs-6才能做到原文档强调的 regardless of how wide the screen resolution is。栅格是布局容器而非控件样式栅格类改变的是元素的盒模型与浮动布局不影响单选框本身的圆形小按钮外观。所以正确做法是给单选框外面的div加栅格类而不是直接给input加——直接对input使用栅格类既不符合 Bootstrap 惯例也无法被本关测试通过。同模块更早的关卡 Use the Bootstrap Grid to Put Elements Side By Side 已经演示过 8 4、4 4 4 的切分本关则是把同样的 12 列数学搬到form内部。三、栅格类可以作用在任意元素上的通用结论关卡文档用一个非常清晰的表达给出了可推广的结论col-xs-* classes are applicable to all form elements适用于所有表单元素。这意味着同一种写法可以迁移到表单控件12 列切分说明单选按钮2 个每个col-xs-66612两个选项各占半行复选框3 个每个col-xs-444412三个选项横排一列文本输入框任意 1-12 的列宽与后续 Line up Form Elements 关卡一致紧跟在后的兄弟关卡Responsively Style Checkboxesbad87fee1348bd9aeda08845.md正是这一通用结论的下一站把三个复选框各自放进col-xs-444412 又一次完美凑满一行。两关连起来学能彻底理解「栅格类 表单布局工具」。四、仓库视角关卡在课程结构中的位置本关是 Bootstrap 模块中的一环。观察两处仓库结构文件可以还原它的坐标模块清单 curriculum/structure/blocks/bootstrap.json 第 10-135 行的challengeOrder数组按顺序列出整个 Bootstrap 模块的挑战本关id: bad87fee1348bd9aedb08845标题 Responsively Style Radio Buttons排在第 15 位紧接着的前后关卡分别是 Add Font Awesome Icons to all of our Buttons 和 Responsively Style Checkboxes。该文件还注明helpCategory: HTML-CSS与blockLayout: legacy-challenge-list说明这是一个经典legacyHTML/CSS 动手练习模块。上层课程文件 curriculum/structure/superblocks/front-end-development-libraries.json 把bootstrap列在 Front End Development Libraries前端开发库超级块之下与 jquery、sass、react、redux 等并列。也就是说这段讲解栅格的 markdown 不是孤立的教程片段而是被challengeOrder精确编排、会被课程构建流水线消费的真实课程内容。挑战文件的 YAML frontmatter第 1-11 行提供了完整元数据字段本关取值含义idbad87fee1348bd9aedb08845全局唯一挑战 ID被bootstrap.json的challengeOrder引用titleResponsively Style Radio Buttons挑战标题challengeType0挑战类型编号forumTopicId18270关联论坛话题dashedNameresponsively-style-radio-buttonsURL 友好名称requiredFont Awesome 4.2.0 CSS页面额外注入的依赖raw: true表示以原始标签引入这些字段与--description--、--hints--、--seed--、--solutions--区块共同构成 freeCodeCamp 挑战文件的固定格式仓库中的 curriculum/schema 目录下提供了配套的 schema 校验器与快照测试来保证这类文件格式合规。五、自动化测试这一关是如何被裁判验证的原文档的--hints--段第 21-43 行是三条会在浏览器里执行的自动化断言理解它们等于理解了本关的全部验收标准。它们用 DOM 查询来检查你的 HTML 结构断言 1所有 radio 必须在一个.row容器里const radioButtons document.querySelectorAll(div.row input[typeradio]); assert.lengthOf(radioButtons, 2);div.row input[typeradio]选择所有「位于 class 为 row 的 div 内部、type 为 radio 的 input」数量必须恰好为 2。这说明文档描述中嵌套进 row里的嵌套对测试而言等价于成为 row 的后代节点。断言 2每个 radio 要各归其位处在自己的.col-xs-6列里const radioButtons document.querySelectorAll(div.col-xs-6 input[typeradio]); assert.lengthOf(radioButtons, 2);要求两个 radio 必须分别位于各自col-xs-6的 div 内成为其内部元素共 2 个命中。注意把两个 radio 塞进同一个col-xs-6div 只有 1 次命中同样无法通过。断言 3所有 div 标签必须成对闭合assert.match(code, /\/div/); assert.match(code, /div/g); assert.equal(code.match(/\/div/g).length, code.match(/div/g).length);这是对所有div的「数量守恒」检查源码里div与/div出现次数必须相等。新增一行栅格 新增 3 个开标签外层row 内层两个col-xs-6就必须补上同样数量的 3 个闭合标签否则缩进/嵌套再漂亮也会被判失败。这也是新手最常见错误漏闭合被机器自动揪出的典型场景。六、种子代码与参考解法对照式学改造关卡从一段可运行的 CatPhotoApp 页面开始--seed--第 45-107 行页面已经包含响应式标题、三枚 Font Awesome 按钮、图片、爱好列表和一个form。种子代码中 radio 尚未套栅格它们和复选框、文本输入框一样平铺在form里link hrefhttps://fonts.googleapis.com/css?familyLobster relstylesheet typetext/css style h2 { font-family: Lobster, Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } /style div classcontainer-fluid div classrow div classcol-xs-8 h2 classtext-primary text-centerCatPhotoApp/h2 /div div classcol-xs-4 a href#img classimg-responsive thick-green-border srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg altA cute orange cat lying on its back./a /div /div img srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg classimg-responsive altTuxedo cats running on dirt ground. div classrow div classcol-xs-4 button classbtn btn-block btn-primaryi classfa fa-thumbs-up/i Like/button /div div classcol-xs-4 button classbtn btn-block btn-infoi classfa fa-info-circle/i Info/button /div div classcol-xs-4 button classbtn btn-block btn-dangeri classfa fa-trash/i Delete/button /div /div pThings cats span classtext-dangerlove:/span/p ul licatnip/li lilaser pointers/li lilasagna/li /ul pTop 3 things cats hate:/p ol liflea treatment/li lithunder/li liother cats/li /ol form actionhttps://freecatphotoapp.com/submit-cat-photo labelinput typeradio nameindoor-outdoor Indoor/label labelinput typeradio nameindoor-outdoor Outdoor/label labelinput typecheckbox namepersonality Loving/label labelinput typecheckbox namepersonality Lazy/label labelinput typecheckbox namepersonality Crazy/label input typetext placeholdercat photo URL required button typesubmitSubmit/button /form /div对照参考解法--solutions--第 109-175 行本关要求的改动非常小、非常有针对性——只动 form 内部 radio 的部分在form里、两个 radio 的label外层包一层div.row再各自包一层div.col-xs-6。复选框、输入框、提交按钮保持原样它们属于后续关卡的任务范围form actionhttps://freecatphotoapp.com/submit-cat-photo div classrow div classcol-xs-6 labelinput typeradio nameindoor-outdoor Indoor/label /div div classcol-xs-6 labelinput typeradio nameindoor-outdoor Outdoor/label /div /div labelinput typecheckbox namepersonality Loving/label labelinput typecheckbox namepersonality Lazy/label labelinput typecheckbox namepersonality Crazy/label input typetext placeholdercat photo URL required button typesubmitSubmit/button /form改写前后的结构差异可以用下面的层次图概括仅展示 radio 区域改造前: 改造后: form form ├─ label ▸ input[radio] Indoor ├─ div.row └─ label ▸ input[radio] Outdoor │ ├─ div.col-xs-6 ▸ label ▸ input[radio] Indoor │ └─ div.col-xs-6 ▸ label ▸ input[radio] Outdoor └─ ...每个col-xs-6占 50% 宽两块并列 一整行因为宽度是百分比计算无论设备是 320px 的旧手机还是 4K 显示器两个选项都会各自占据一半宽度、从「上下堆叠的标签」变成视觉上「左右均匀分布的两列」。label包裹input[radio]的既有结构保持不变——点击文字Indoor / Outdoor即可选中对应选项的可用性不被破坏这正是栅格只负责外部分布、不干预内部控件的体现。同组的两个 radio 仍共享nameindoor-outdoor属于同一单选组一次只能选一个的语义由 name 属性保证与栅格无关。七、动手自测与常见错误排查按原文档的三条 hints可以在本地手动复现测试逻辑。把解法 HTML 保存到文件后在浏览器 DevTools Console 中执行下面任一查询来验证// 应返回 NodeList长度为 2 document.querySelectorAll(div.row input[typeradio]); // 应返回 NodeList长度为 2 document.querySelectorAll(div.col-xs-6 input[typeradio]);常见错误与对应提示快速对照错误写法后果命中的断言两个 radio 直接平铺、不加 row/col第 1、2 条断言均为 0 命中断言 1、2 失败只在外面加div.row、漏掉各自的div.col-xs-6radio 虽是 row 后代但没有 col 命中断言 2 失败两个 radio 放进同一个col-xs-6col-xs-6内 radio 数量命中只有 1断言 2 失败新增 div 忘记写/div开闭标签数量不相等断言 3 失败把col-xs-6直接加到input上选择器div.col-xs-6 input无法命中断言 2 失败八、从本关出发的后续学习路径本关是「把 Bootstrap 栅格应用到表单」系列的开端。按照 curriculum/structure/blocks/bootstrap.json 中challengeOrder的顺序紧接着的关卡与本文形成递进关系Responsively Style Checkboxesbad87fee1348bd9aeda08845.md三个复选框分别放入col-xs-4进一步印证 12 列拆分法则Style Text Inputs as Form Controls文本输入框套用表单控件样式Line up Form Elements Responsively with Bootstrap把单选、复选、文本输入等所有控件整体放进栅格排版。可以看到 freeCodeCamp 把「一个可迁移的 CSS 概念」拆解成一组小步练习先用按钮与图片学会row/col-xs-*再在本关把它迁移到 radio下一关迁移到 checkbox最后做整表单布局——每一步只引入一个新变量。阅读关卡源码时同时对照 curriculum/structure/blocks/bootstrap.json 的challengeOrder与各自文件中的--seed--/--solutions--会发现每个解法都只在上一个解法的结果上做最小增量修改这本身就是一份很好的响应式表单布局最小改造的示范序列。九、小结Responsively Style Radio Buttons这一关用一次极小的 HTML 结构调整讲透了三个可长期复用的要点Bootstrap 的col-xs-*栅格类可作用在包括表单控件在内的任意元素上本关用它让两个单选按钮在任意分辨率下各占半行栅格负责外部布局、label 负责控件语义二者各司其职结构上通过div.row div.col-xs-6 label input[radio]逐层嵌套表达在 freeCodeCamp 中一切以--hints--里的 DOM 断言为准——理解document.querySelectorAll选择器如何验证层级就掌握了这类关卡通过与否的根本判据。你可以直接在仓库中打开 curriculum/challenges/english/blocks/bootstrap/bad87fee1348bd9aedb08845.md 阅读原文结合 curriculum/structure/blocks/bootstrap.json 了解它在整个 Bootstrap 模块中的编排位置然后动手把 radio、checkbox、文本输入组合成一张真正响应式的表单页。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/8 18:23:13 · 阅读 1.2k freeCodeCamp 栅格实战：用 Bootstrap 的 col-xs-6 让 Radio Buttons 自适应布局
freeCodeCamp 栅格实战用 Bootstrap 的 col-xs-6 让 Radio Buttons 自适应布局【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本指南围绕 freeCodeCamp 开源仓库中 Bootstrap 模块的经典关卡Responsively Style Radio Buttons展开讲解如何把「12 列栅格系统」应用到表单元素上将一对单选框分别放进col-xs-6列使它们在任意屏幕宽度下都平分一整行、均匀分布。读完本文你将掌握rowcol-*-*栅格对表单控件的套用方式、freeCodeCamp 关卡文档frontmatter 描述 测试 种子代码 参考答案的结构以及通过仓库中的关卡源码、结构 JSON 与相邻关卡串起的前后知识链。一、这一关要解决什么问题关卡原文描述对应 curriculum/challenges/english/blocks/bootstrap/bad87fee1348bd9aedb08845.md 第 13-19 行写得很直白You can use Bootstrapscol-xs-*classes onformelements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is.也就是说Bootstrap 栅格类不仅能用在图片、按钮上同样适用于form表单里的元素。如果把一对单选按钮各自放进一列栅格它们就能在任意屏幕宽度下都平分一行、保持均匀间距而不是挤在表单左侧。关卡任务拆解把两个radio单选按钮一起嵌套进一个div classrow再把每个单选按钮分别嵌套进一个div classcol-xs-6。关卡特意提示单选按钮本质上是typeradio的input元素。这是后面理解测试断言、理解「栅格加在包裹层而非 input 本身」的关键。二、为什么 col-xs-6 能做到「无论分辨率多宽都均匀分布」freeCodeCamp 这一 Bootstrap 模块固定在 Bootstrap 3 之上。仓库的模块定义文件 curriculum/structure/blocks/bootstrap.json 第 5-8 行的required字段明确声明了版本required: [ { link: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css } ]即该模块所有关卡运行在 Bootstrap3.3.7的 CSS 之上。理解下面三点就理解了本关的「为什么」栅格一共 12 列col-xs-6表示占据 6 / 12 50% 的宽度。两个col-xs-6恰好填满一行 12 列。col-xs-是永远生效的最小屏类*Bootstrap 3 是移动优先设计col-xs-*不依赖任何媒体查询断点从最小屏到最大屏都按百分比宽度生效而col-sm-*、col-md-*、col-lg-*分别要到更宽的视口才生效。因此这里选col-xs-6才能做到原文档强调的 regardless of how wide the screen resolution is。栅格是布局容器而非控件样式栅格类改变的是元素的盒模型与浮动布局不影响单选框本身的圆形小按钮外观。所以正确做法是给单选框外面的div加栅格类而不是直接给input加——直接对input使用栅格类既不符合 Bootstrap 惯例也无法被本关测试通过。同模块更早的关卡 Use the Bootstrap Grid to Put Elements Side By Side 已经演示过 8 4、4 4 4 的切分本关则是把同样的 12 列数学搬到form内部。三、栅格类可以作用在任意元素上的通用结论关卡文档用一个非常清晰的表达给出了可推广的结论col-xs-* classes are applicable to all form elements适用于所有表单元素。这意味着同一种写法可以迁移到表单控件12 列切分说明单选按钮2 个每个col-xs-66612两个选项各占半行复选框3 个每个col-xs-444412三个选项横排一列文本输入框任意 1-12 的列宽与后续 Line up Form Elements 关卡一致紧跟在后的兄弟关卡Responsively Style Checkboxesbad87fee1348bd9aeda08845.md正是这一通用结论的下一站把三个复选框各自放进col-xs-444412 又一次完美凑满一行。两关连起来学能彻底理解「栅格类 表单布局工具」。四、仓库视角关卡在课程结构中的位置本关是 Bootstrap 模块中的一环。观察两处仓库结构文件可以还原它的坐标模块清单 curriculum/structure/blocks/bootstrap.json 第 10-135 行的challengeOrder数组按顺序列出整个 Bootstrap 模块的挑战本关id: bad87fee1348bd9aedb08845标题 Responsively Style Radio Buttons排在第 15 位紧接着的前后关卡分别是 Add Font Awesome Icons to all of our Buttons 和 Responsively Style Checkboxes。该文件还注明helpCategory: HTML-CSS与blockLayout: legacy-challenge-list说明这是一个经典legacyHTML/CSS 动手练习模块。上层课程文件 curriculum/structure/superblocks/front-end-development-libraries.json 把bootstrap列在 Front End Development Libraries前端开发库超级块之下与 jquery、sass、react、redux 等并列。也就是说这段讲解栅格的 markdown 不是孤立的教程片段而是被challengeOrder精确编排、会被课程构建流水线消费的真实课程内容。挑战文件的 YAML frontmatter第 1-11 行提供了完整元数据字段本关取值含义idbad87fee1348bd9aedb08845全局唯一挑战 ID被bootstrap.json的challengeOrder引用titleResponsively Style Radio Buttons挑战标题challengeType0挑战类型编号forumTopicId18270关联论坛话题dashedNameresponsively-style-radio-buttonsURL 友好名称requiredFont Awesome 4.2.0 CSS页面额外注入的依赖raw: true表示以原始标签引入这些字段与--description--、--hints--、--seed--、--solutions--区块共同构成 freeCodeCamp 挑战文件的固定格式仓库中的 curriculum/schema 目录下提供了配套的 schema 校验器与快照测试来保证这类文件格式合规。五、自动化测试这一关是如何被裁判验证的原文档的--hints--段第 21-43 行是三条会在浏览器里执行的自动化断言理解它们等于理解了本关的全部验收标准。它们用 DOM 查询来检查你的 HTML 结构断言 1所有 radio 必须在一个.row容器里const radioButtons document.querySelectorAll(div.row input[typeradio]); assert.lengthOf(radioButtons, 2);div.row input[typeradio]选择所有「位于 class 为 row 的 div 内部、type 为 radio 的 input」数量必须恰好为 2。这说明文档描述中嵌套进 row里的嵌套对测试而言等价于成为 row 的后代节点。断言 2每个 radio 要各归其位处在自己的.col-xs-6列里const radioButtons document.querySelectorAll(div.col-xs-6 input[typeradio]); assert.lengthOf(radioButtons, 2);要求两个 radio 必须分别位于各自col-xs-6的 div 内成为其内部元素共 2 个命中。注意把两个 radio 塞进同一个col-xs-6div 只有 1 次命中同样无法通过。断言 3所有 div 标签必须成对闭合assert.match(code, /\/div/); assert.match(code, /div/g); assert.equal(code.match(/\/div/g).length, code.match(/div/g).length);这是对所有div的「数量守恒」检查源码里div与/div出现次数必须相等。新增一行栅格 新增 3 个开标签外层row 内层两个col-xs-6就必须补上同样数量的 3 个闭合标签否则缩进/嵌套再漂亮也会被判失败。这也是新手最常见错误漏闭合被机器自动揪出的典型场景。六、种子代码与参考解法对照式学改造关卡从一段可运行的 CatPhotoApp 页面开始--seed--第 45-107 行页面已经包含响应式标题、三枚 Font Awesome 按钮、图片、爱好列表和一个form。种子代码中 radio 尚未套栅格它们和复选框、文本输入框一样平铺在form里link hrefhttps://fonts.googleapis.com/css?familyLobster relstylesheet typetext/css style h2 { font-family: Lobster, Monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } /style div classcontainer-fluid div classrow div classcol-xs-8 h2 classtext-primary text-centerCatPhotoApp/h2 /div div classcol-xs-4 a href#img classimg-responsive thick-green-border srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg altA cute orange cat lying on its back./a /div /div img srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg classimg-responsive altTuxedo cats running on dirt ground. div classrow div classcol-xs-4 button classbtn btn-block btn-primaryi classfa fa-thumbs-up/i Like/button /div div classcol-xs-4 button classbtn btn-block btn-infoi classfa fa-info-circle/i Info/button /div div classcol-xs-4 button classbtn btn-block btn-dangeri classfa fa-trash/i Delete/button /div /div pThings cats span classtext-dangerlove:/span/p ul licatnip/li lilaser pointers/li lilasagna/li /ul pTop 3 things cats hate:/p ol liflea treatment/li lithunder/li liother cats/li /ol form actionhttps://freecatphotoapp.com/submit-cat-photo labelinput typeradio nameindoor-outdoor Indoor/label labelinput typeradio nameindoor-outdoor Outdoor/label labelinput typecheckbox namepersonality Loving/label labelinput typecheckbox namepersonality Lazy/label labelinput typecheckbox namepersonality Crazy/label input typetext placeholdercat photo URL required button typesubmitSubmit/button /form /div对照参考解法--solutions--第 109-175 行本关要求的改动非常小、非常有针对性——只动 form 内部 radio 的部分在form里、两个 radio 的label外层包一层div.row再各自包一层div.col-xs-6。复选框、输入框、提交按钮保持原样它们属于后续关卡的任务范围form actionhttps://freecatphotoapp.com/submit-cat-photo div classrow div classcol-xs-6 labelinput typeradio nameindoor-outdoor Indoor/label /div div classcol-xs-6 labelinput typeradio nameindoor-outdoor Outdoor/label /div /div labelinput typecheckbox namepersonality Loving/label labelinput typecheckbox namepersonality Lazy/label labelinput typecheckbox namepersonality Crazy/label input typetext placeholdercat photo URL required button typesubmitSubmit/button /form改写前后的结构差异可以用下面的层次图概括仅展示 radio 区域改造前: 改造后: form form ├─ label ▸ input[radio] Indoor ├─ div.row └─ label ▸ input[radio] Outdoor │ ├─ div.col-xs-6 ▸ label ▸ input[radio] Indoor │ └─ div.col-xs-6 ▸ label ▸ input[radio] Outdoor └─ ...每个col-xs-6占 50% 宽两块并列 一整行因为宽度是百分比计算无论设备是 320px 的旧手机还是 4K 显示器两个选项都会各自占据一半宽度、从「上下堆叠的标签」变成视觉上「左右均匀分布的两列」。label包裹input[radio]的既有结构保持不变——点击文字Indoor / Outdoor即可选中对应选项的可用性不被破坏这正是栅格只负责外部分布、不干预内部控件的体现。同组的两个 radio 仍共享nameindoor-outdoor属于同一单选组一次只能选一个的语义由 name 属性保证与栅格无关。七、动手自测与常见错误排查按原文档的三条 hints可以在本地手动复现测试逻辑。把解法 HTML 保存到文件后在浏览器 DevTools Console 中执行下面任一查询来验证// 应返回 NodeList长度为 2 document.querySelectorAll(div.row input[typeradio]); // 应返回 NodeList长度为 2 document.querySelectorAll(div.col-xs-6 input[typeradio]);常见错误与对应提示快速对照错误写法后果命中的断言两个 radio 直接平铺、不加 row/col第 1、2 条断言均为 0 命中断言 1、2 失败只在外面加div.row、漏掉各自的div.col-xs-6radio 虽是 row 后代但没有 col 命中断言 2 失败两个 radio 放进同一个col-xs-6col-xs-6内 radio 数量命中只有 1断言 2 失败新增 div 忘记写/div开闭标签数量不相等断言 3 失败把col-xs-6直接加到input上选择器div.col-xs-6 input无法命中断言 2 失败八、从本关出发的后续学习路径本关是「把 Bootstrap 栅格应用到表单」系列的开端。按照 curriculum/structure/blocks/bootstrap.json 中challengeOrder的顺序紧接着的关卡与本文形成递进关系Responsively Style Checkboxesbad87fee1348bd9aeda08845.md三个复选框分别放入col-xs-4进一步印证 12 列拆分法则Style Text Inputs as Form Controls文本输入框套用表单控件样式Line up Form Elements Responsively with Bootstrap把单选、复选、文本输入等所有控件整体放进栅格排版。可以看到 freeCodeCamp 把「一个可迁移的 CSS 概念」拆解成一组小步练习先用按钮与图片学会row/col-xs-*再在本关把它迁移到 radio下一关迁移到 checkbox最后做整表单布局——每一步只引入一个新变量。阅读关卡源码时同时对照 curriculum/structure/blocks/bootstrap.json 的challengeOrder与各自文件中的--seed--/--solutions--会发现每个解法都只在上一个解法的结果上做最小增量修改这本身就是一份很好的响应式表单布局最小改造的示范序列。九、小结Responsively Style Radio Buttons这一关用一次极小的 HTML 结构调整讲透了三个可长期复用的要点Bootstrap 的col-xs-*栅格类可作用在包括表单控件在内的任意元素上本关用它让两个单选按钮在任意分辨率下各占半行栅格负责外部布局、label 负责控件语义二者各司其职结构上通过div.row div.col-xs-6 label input[radio]逐层嵌套表达在 freeCodeCamp 中一切以--hints--里的 DOM 断言为准——理解document.querySelectorAll选择器如何验证层级就掌握了这类关卡通过与否的根本判据。你可以直接在仓库中打开 curriculum/challenges/english/blocks/bootstrap/bad87fee1348bd9aedb08845.md 阅读原文结合 curriculum/structure/blocks/bootstrap.json 了解它在整个 Bootstrap 模块中的编排位置然后动手把 radio、checkbox、文本输入组合成一张真正响应式的表单页。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考