Bootstrap 3 和表单 css 技巧问题

Question

所以我想出了一些东西，不是很复杂但很好。

您将单击一个标签，然后出现一个文本框、保存按钮和取消按钮。全部在 CSS 中。不是很复杂，继续。

我遇到的问题现在 css/html 结构在经过一些调整后可以正常工作，以利用引导表单类。

如果我的表格在这里：

<form>
    <input id="toggle-username" type="checkbox" class="toggle-username">
    <input id="username-submit" type="submit" name="submit" class="submit-username">

    <label for="toggle-username" class="toggle-username">
        <h3>{{ user.username }}</h3> <!-- twig -->
    </label>

    <div class="input-group">
        <input type="text" name="username" value="{{ user.username }}" class="username form-control">            
        <label for="username-submit" class="input-group-addon submit-username glyphicon glyphicon-ok-circle"></label>
        <label for="toggle-username" class="input-group-addon glyphicon glyphicon-remove-circle toggle-username"></label>
    </div>

</form>

然后我的sass：

label {
    margin-bottom: 0;
}
input {
    display: none;
}
input[type="text"] {
    display: none;
    ~ label {
        display: none;
    }
}
input[type="checkbox"] {
    &:checked  {
        ~ .input-group {
            input, label {
                display: block !important;
            }

        }
    }
}

我想要的结果：

而我的实际结果：

任何帮助将不胜感激

Answer 1

我终于明白了。

我没有将标签设置为block，而是使用了table-cell

label {
    display: table-cell;
}

在一天结束时非常简单。

Answer 2

我认为这应该适合你。需要重新添加其他类

<div class="input-group">
   <input type="text" name="username" value="{{ user.username }}" class="username form-control" /> 
   <span class="input-group-addon"><i class="glyphicon glyphicon-ok-circle"></i></span>
   <span class="input-group-addon"><i class="glyphicon glyphicon-remove-circle"></i></span>
</div>

小提琴：http://jsfiddle.net/S3QZp/