使用webforms在Master Page中使用bootstrap jumbotron和contentplaceholder

Question

刚开始使用Bootstrap和Webforms。

我注意到，当使用母版页时，在内容框架中放置一个超大屏幕时，它并没有伸展到屏幕的宽度，但是当将jumbotron放在内容页面位置之外的母版页中时，它确实

所以做了一些研究我发现我可以使用倍数内容占位符，改变这样的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，这可能我甚至不会在其他webforms中使用相同的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>