使用网络表单在母版页中引导 jumbotron 和 contentplaceholder答案

【问题标题】：bootstrap jumbotron and contentplaceholder in Master Page using webforms使用网络表单在母版页中引导 jumbotron 和 contentplaceholder
【发布时间】：2016-06-01 06:10:15
【问题描述】：

从 Bootstrap 和 Webforms 开始。

我注意到，当使用母版页和在 contentplaceholder 中放置 jumbotron 时，它不会延伸到屏幕的宽度，但是当将 jumbotron 放置在 contentplaceholder 之外的母版页中时，它会延伸。

所以做了一些研究，我发现我可以使用多个内容占位符，改变 Jumbotron 的样式，如下所示：

大师：

    <div style="width:100%;padding-left:0px;padding-right:0px;">
        <asp:ContentPlaceHolder ID="Jumbotron" runat="server">

        </asp:ContentPlaceHolder>
    </div>

.aspx：

<asp:Content ID="Content2" ContentPlaceHolderID="Jumbotron" runat="server">
    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
        <div class="container">
            <h1>Hello, world!</h1>
            <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
        </div>
    </div> 
</asp:Content>

但如果我想在页面中使用多个 Jumbotron，我将不得不在 Master 中创建多个 contentplaceholder，也许我什至不会在使用相同 MasterPage 的其他网络表单中使用它们。我也可以使用不同的 MasterPages，但是你们有什么想法可以避免这种情况，也许可以用不同的方法来做到这一点？

【问题讨论】：

澄清一下，您是否在寻找具有 100% 宽度的超大屏幕？ contentplaceholder（来自内存）有一些填充，但您始终可以使用 CSS 为该特定元素删除它。
是的，一个具有 100% 宽度的 jumbotron，是的，它有一些我必须使用 css 删除的填充，如我上面的示例代码所示。
你能在开发者工具上看到填充来自哪里吗？上面的代码看起来像是从 div 中删除了填充，但没有从 ContentPlaceHolder 中删除。
如果你想改变 jumbotron 填充，你可以改变下面的 css .jumbotron { padding-top: 48px; padding-bottom: 48px; }
如何为 jumbotron 放置一个单独的内容控件，然后如果您不打算使用它，就将它从 Web 表单中隐藏起来？

标签： css asp.net twitter-bootstrap twitter-bootstrap-3 webforms

【解决方案1】：

这是我发现的（感谢sringland 建议我使用开发者工具）

大师

        <!-- For Jumbotron to work in 100% width -->
        <div style="width:100%;padding-left:0px;padding-right:0px;">
            <asp:ContentPlaceHolder ID="Jumbotron" runat="server">

            </asp:ContentPlaceHolder>
        </div>        

        <!-- For the rest of the contents -->
        <div style="width:100%;padding-left:0px;padding-right:0px;">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

            </asp:ContentPlaceHolder>

            <hr />

            <div class="container">
                <footer>
                    <p>&copy; 2015 Company, Inc.</p>                
                </footer>
            </div>            
        </div>

不再需要For Jumbotron to work in 100% width 部分。我只是在主 ContentPlaceHolder (ContentPlaceHolder1) 中使用相同的 css，并将另一个带有类容器的 div 添加到页脚。

通过这种方式，我可以在使用该 Master 的网络表单中使用容器 div 或 Jumbotron，如下例所示：

.aspx

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="container">
        <!-- Example row of columns -->
        <div class="row">
            <div class="col-md-4">
                <h2>Heading</h2>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div>
            <div class="col-md-4">
                <h2>Heading</h2>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div>
            <div class="col-md-4">
                <h2>Heading</h2>
                <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div>
        </div>
    </div>

    <div class="jumbotron">
        <div class="container">
            <h1>Hello, world!</h1>
            <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
        </div>
    </div> 

</asp:Content>

【讨论】：