css - Twitter Bootstrap 布局宽度隐藏元素

Question

我正在开发一个 aspnet 应用程序和 Twitter Bootstrap 。我有一种情况，我需要根据我可以正确执行的可变女巫来隐藏跨度。问题是隐藏的跨度保持宽度并打破下一个 div。

 <div class="row-fluid">
         <div class='<%= (showTitle  ? "span4" : "hide")  %>'>
            <label>Title</label>
            <ASP:DropDownList ID="DpdLstTitle" runat="server"  CssClass="span12"></ASP:DropDownList>
        </div>
        <div class='<%= (showTitle  ? "span8" : "span12")  %>'>
            <label>Name</label>
            <ASP:TextBox ID="TboxName" runat="server" MaxLength="80"  CssClass="span12" />
        </div>
    </div>

有什么建议吗？

Answer 1

您将不得不添加一些 css，因为 bootstrap 已将边距添加到第二行

可能:

margin-left: 2.127659574468085%;

所以你必须覆盖它。插入

margin-left: 0;

示例 HTML:

<div class="row-fluid">
    <div class='<%= (showTitle  ? "span4" : "hide")  %>'>
        <label>Title</label>
        <ASP:DropDownList ID="DpdLstTitle" runat="server"  CssClass="span12"></ASP:DropDownList>
    </div>
    <div class='<%= (showTitle  ? "span8" : "span12 hiddenColBefore")  %>'>
        <label>Name</label>
        <ASP:TextBox ID="TboxName" runat="server" MaxLength="80"  CssClass="span12" />
    </div>
</div>

示例 CSS:

.hiddenColBefore {
    margin-left: 0 !important;
}