如何使用Bootstrap网格系统为ContentPlaceHolder设置响应式列布局？

嘿，作为Bootstrap新手能想到用网格系统来做响应式布局，这个思路非常对！我来帮你把母版页的布局调整到位，让你的左右内容区完美适配不同屏幕。

首先先修正你代码里的小细节——Bootstrap 3+版本里已经用row替代了旧的row-fluid，container-fluid是没问题的，它会让容器占满整个视口宽度。接下来我们要把两个ContentPlaceHolder分别放在对应的网格列里，记住Bootstrap网格的核心规则：一行的列宽度总和要等于12。

给你补全并优化后的母版页代码：

<div class="container-fluid">
    <div class="row">
        <!-- 左侧内容区：手机端全屏堆叠，平板及以上占3列宽度 -->
        <div class="col-xs-12 col-sm-3">
            <div id="leftcontent">
                <asp:ContentPlaceHolder ID="sidecontentholder" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </div>

        <!-- 右侧内容区：手机端全屏堆叠，平板及以上占9列宽度 -->
        <div class="col-xs-12 col-sm-9">
            <div id="rightcontent">
                <asp:ContentPlaceHolder ID="maincontentholder" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </div>
    </div>
</div>

关键细节解释： #

• col-xs-12：当屏幕宽度小于768px（手机设备）时，列会占满整个12列宽度，左右内容区会自动垂直堆叠，避免小屏幕上内容拥挤。
• col-sm-3/col-sm-9：当屏幕宽度≥768px（平板及桌面设备）时，左侧占3份宽度，右侧占9份，加起来刚好12列，实现左右分栏布局。
• 每个ContentPlaceHolder都嵌套在对应的列容器里，后续你在内容页中创建Content控件时，只要关联对应的ID，内容就会自动填充到这个响应式列中。

额外实用提示： #

• 确保你的项目已经正确引入了Bootstrap的CSS文件，如果需要用到下拉菜单、模态框这类交互组件，还要引入Bootstrap的JS和jQuery。
• 你可以根据需求调整列的宽度比例，比如把左侧改成col-sm-4、右侧改成col-sm-8，只要两者宽度总和是12就符合规则。
• 如果你还在使用Bootstrap 2.x版本，row-fluid是可以保留的，但建议升级到3+版本，兼容性和功能都更完善。

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