css - 使用 webforms 在母版页中 Bootstrap jumbotron 和 contentplaceholder

Question

刚开始使用 Bootstrap 和 Webforms。

我注意到，在使用母版页和内容占位符时，在其中放置超大屏幕时不会横跨屏幕宽度，但在母版页中将超大屏幕放在内容占位符之外时，它会横跨屏幕宽度。

所以做了一些研究，我发现我可以使用多个 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，但是你们有没有想过如何避免这种情况，也许有不同的方法来做到这一点？

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 的网络表单中使用容器 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>