Bootstrap与Formstack CSS冲突导致单选按钮仅部分可见

嘿，这种框架样式冲突真的挺闹心的！我之前也碰到过类似的表单组件对齐坑，给你几个实测有效的解决思路：

• 用Flex布局强制对齐（最推荐）
  直接给Formstack的fsOptionLabel.vertical类设置flex布局，能彻底解决垂直对齐问题，同时重置冲突的行高属性：

  /* 修复单选按钮与文本对齐 */
  .fsOptionLabel.vertical {
    display: inline-flex;
    align-items: center;
    line-height: 1.5; /* 和Bootstrap默认行高保持一致 */
    margin-bottom: 0; /* 清除多余间距 */
  }
  
  .fsOptionLabel.vertical input[type="radio"] {
    margin-right: 0.5rem; /* 给单选框和文本加个合理间距 */
    vertical-align: middle; /* 兜底兼容旧浏览器 */
  }
  

  原理是flex的align-items: center能让内部的单选框和文本自动垂直居中，完全避开两个框架的line-height冲突。

• 针对性覆盖冲突属性
  如果flex布局没生效，大概率是某个具体属性被强制覆盖了，你可以用浏览器开发者工具（F12）检查label和input的样式，然后针对性重置：

  label.fsOptionLabel.vertical {
    vertical-align: baseline;
    position: relative;
    top: auto; /* 清除可能被设置的偏移值 */
  }
  
  label.fsOptionLabel.vertical input.fsField {
    position: static; /* 取消定位导致的错位 */
    margin-top: 0; /* 清除Bootstrap可能给input加的margin-top */
  }
  

• 优先级兜底方案（尽量少用）
  如果上面的样式被框架的高优先级样式覆盖，临时加!important应急（注意不要滥用，避免后续样式维护麻烦）：

  .fsOptionLabel.vertical {
    display: inline-flex !important;
    align-items: center !important;
  }
  

注意事项：把这些自定义CSS放在你的项目样式文件最末尾，确保它加载在Bootstrap和Formstack的CSS之后，这样才能优先生效。

内容的提问来源于stack exchange，提问作者PythonSherpa