Question

所以我有一个主要的样式更改，而当我的所有视图最初设置时，我使用了Bootstrap并依赖容器类来调整1200px，992px和768px断点处的媒体查询。所有我的表单输入和其他内容工作他们的填充和所有关闭容器的填充，边距等...现在，要求宽度为100％，但所有内容留在它所在的背景颜色样式填充显示的宽度。

我试图想一想如何添加另一个容器类来使其在所有视图上工作。有什么建议可以将内容的限制保持在1200px等等（对于媒体查询等），但是让其他区域扩展到100％？

这是现在的图像捕捉。它只是棕褐色和深灰色区域，topo图像将扩展100％，而其他所有区域都在容器类的限制范围内。

我的代码结构如此，你可以看到我的delima与overtra riding bootstraps容器类的位置：

<div class="container">
    <form role="form">
        <div class="naviaHead col-md-12">
            <div class="naviaHeader">
                <div class="inner">
                    <div class="col-md-6 loginArea">
                        <h1 class="col-md-8">Login</h1>
                        <div class="form-group">
                            <div class="form-group col-md-8 naviaInp">
                                <input type="text" name="userName" class="form-control" placeholder="username" data-ng-model="loginData.userName"autofocus>
                            </div>
                            <div class="form-group col-md-8 naviaInp">
                                <input type="password" name="passWord" class="form-control" placeholder="password" data-ng-model="loginData.password">
                            </div>
                            <div style="clear: both;">
                                <input type="button" class="naviaBtn naviaBlue" data-ng-click="login()" value="login">
                                <div data-ng-hide="message == ''" class="alert alert-danger">
                                    {{message}}
                                </div>
                            </div>
                            <div class="loginForget">
                                <span><a class="naviaLink" href="#/logreg/forgotUser">forgot username</a> or <a class="naviaLink" href="#/logreg/forgotPass">forgot password</a></span>
                            </div>
                            <div class="sowLogin">
                                <img class="col-md-3" src="ppt/assets/images/login/sowIcon.svg">
                                <p class="col-md-9"><a class="naviaLink" href="https://pebb.flex-plan.com/part/PortalRegistration.aspx">PEBB eligible State of Washington employees please click here to access the portal</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <img style="padding-left: 25%;" src="ppt/assets/images/login/naviaLogo.png">
                    </div>                    
                </div>
            </div>
        </div>
    </form>
    <div class="loginLearn">
        <div id="area1" class="col-md-4 learnSections">
            <img src="ppt/assets/images/login/teaserImage1-full.png">
            <div class="learnText">
                <h3 class="teaserTitle">Online Account Access</h3>
                <p class="teaserText">24/7 Access to balances, claim submissions and all things Navia!</p>
                <button type="button" class="btn btn-primary learnButtons">learn more</button>
            </div>        
        </div>
        <div id="area2" class="col-md-4 learnSections">
            <img src="ppt/assets/images/login/teaserImage2-full.png">
            <div class="learnText">
                <h3 style="margin-top: 0;" class="teaserTitle">Navia Benefits Card</h3>
                <p class="teaserText">Don't wait for reimbursement!</p>
                <button type="button" class="btn btn-primary learnButtons">learn more</button>
            </div>        
        </div>    
        <div id="area3" class="col-md-4 learnSections">
            <img src="ppt/assets/images/login/teaserImage3-full.png">
            <div class="learnText">
                <h3 style="margin-top: 0;" class="teaserTitle">FlexConnect</h3>
                <p class="teaserText">Link your FSA to your insurnace and file claims instantly!</p>
                <button type="button" class="btn btn-primary learnButtons">learn more</button>
            </div>        
        </div>    
    </div> 
    <div style="background-color: #ede8e2; height: 150px; clear: both;">
        <!-- intentionally blank -->
    </div>   
</div>

Answer 1

这将解决您的目的

 <div class="container-fluid" style="background-color:red;">//This will be 100% width

        <div class="container">//Inside this put your content as it was to make it indent as previous
         //Your page HTML here
        </div>
 </div>

调整Bootstrap宽度，但保持容器类约束

1 个答案: