标签与复选框重叠答案

【问题标题】：Label overlapping with Checkbox标签与复选框重叠
【发布时间】：2018-10-08 15:09:31
【问题描述】：

我尝试将填充边距放在机器人输入元素的左侧以及标签上，但都没有帮助。你能帮我正确对齐标签吗？谢谢！

<div class="row">
        <div class="col-xs-12">
            <div class="input-checkbox">
                <input id="activateSocialMediaTrial" name="activateSocialMediaTrial" asp-for="ActivateSocialMediaTrial" type="checkbox" style="padding: 15px; margin:15px" />
                <label for="activateSocialMediaTrial" style="white-space: nowrap">Sign me up for a <b>free 30 days trial of social media management</b></label>
            </div>
        </div>
    </div>

.input-checkbox label {
  background: none;
  border: 1px solid #d3d3d3;
  text-align: center;
  position: relative;
}

【问题讨论】：

你有任何复选框插件可以让你的复选框看起来像这样吗？
您能在检查器中显示样式吗？我在这里发布了你的代码：codepen.io/arlcode/pen/oaYeEN，它工作得很好，我假设有一个 Bootstrap 默认值正在覆盖它。
逻辑上添加padding-left:75px（近似值猜测）应该会有所帮助。要获得更多信息，您必须显示输入的 css 以及呈现的 html。

标签： html css twitter-bootstrap

【解决方案1】：

您已将input 的边距设置为margin:15px，这导致它从其预期位置移动，因为在引导程序中input:checkbox 具有margin:-1.25em，因此您将其从其位置移动。

【讨论】：

谢谢。你提到的保证金已经在上面的sn-p中了。你错过向右滚动了吗;-)
是的，我看到了，这就是我所指出的，您添加了margin:15px，而默认样式为margin-left:-1.25rem，因此复选框被拖回标签上方15px。