使用webforms引导母版页中的巨型加速器和内容占位符

Question

刚刚开始的引导和Webforms。

我已经注意到，当使用母版页和在内容占位符中放置一个巨型加速器时，它并不会延伸到屏幕的宽度，而是当将巨无霸放在母版页中的内容占位符之外时。

因此，通过一些研究，我发现我可以使用倍数内容占位符，为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中创建几个内容占位符，也许我甚至没有在其他want表单中使用相同的MasterPage。我也可以使用不同的MasterPages，但是你们知道如何避免这种情况吗？

Answer 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的webforms中使用容器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>