Question

我正在设置一个使用Bootstrap的Asp.Net主页面。我们有一个三列布局，第三列是可选的

<div class="row " >
    <div id="leftCol" class="col-sm-3 no-left-gutter  leftmenu" />
    <div class="col-sm-7" id="centercol' />
    <div class="col-sm-2" id = "rightcol"> <asp:ContentPlaceHolder .../>  </div><div>

现在，如果继承此母版页 的任何页面没有使用 ，则右侧列放置任何内容，然后应隐藏右侧列和中心列应取中心和右列的大小。

有没有办法使用bootstrap轻松实现这一点（或者没有它）？谢谢。

Answer 1

可以根据右栏的可见性动态设置centercol和rightcol div的类

可见：类设置为col-sm-7（中心）和col-sm-2（右）

隐藏：类设置为col-sma-9（中）和显示：无（右）

Answer 2

您可以检查ContentPlaceHolder是否有任何内容，并在代码中设置CssClass：

ASPX：

<div class="row " >
    <div id="leftCol" class="col-sm-3 no-left-gutter leftmenu" />
    <asp:Panel ID="pCenter" runat="server"> 
    <asp:Panel ID="pRight" runat="server"> 
        <asp:ContentPlaceHolder ID="cphRight" runat="server" />
    </div>
<div>

CS：

if(this.cphRight.Controls.Count > 0) 
{
    this.pCenter.CssClass = "col-sm-7";
    this.pRight.CssClass = "col-sm-2";
}
else
{
    this.pCenter.CssClass = "col-sm-9";
    this.pRight.Visible = false;
}

我使用了asp:Panel代替div，因为它们也很方便并生成div。或者，您仍然可以使用div，但您应该为其提供属性和值runat="server"，以便能够在后面的代码中访问它。

如何在Bootstrap中获得灵活的三列布局？

2 个答案: