麻烦与引导程序中的背景颜色

时间：2016-04-08 14:59:37

标签： html css twitter-bootstrap

我有一个简单的页面，我正在使用bootsrap为我的前端构建。这是我的FIDDLE。我在定制背景颜色方面遇到了一些问题。

以下是我当前页面的样子。正如你在那里看到的那样 是标题，正文和页脚。 enter image description here

我想要实现的是这样的 enter image description here

基本上我想要两种不同的颜色。我希望身体有 不同的颜色高于收藏夹。我不想对我的页脚或标题代码进行任何更改，因为它们将被视为不同的组件。所以我认为的方法是我可以把所有的div放在最喜欢的标题之上的一个单独的div中实现这个但我遇到了问题。看看我FIDDLE中的这种尝试。颜色超出了收藏区域。

我很感激任何建议。

以下是我的HTML代码

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid" style="border-bottom: 2px solid #CDCCC9; background-color: blue">
    <div class="row">
        <div class="col-sm-2"></div>

        <div class="col-sm-2">
            &emsp;
            <!-- navbar header -->
            <div class="navbar-header">                 
                <!-- brand -->
                <img src="assets/images/fe-logo.png" alt="." style="padding-top:10px;padding-left:30px;padding-bottom:30px;"/>
                <!-- / brand -->
             </div>
            <!-- / navbar header -->
        </div>
        <div class="col-sm-8"> 
            <!-- navbar right -->
            <!-- ToDo - note that there is a hard-coded name in navbar for now - will need to be dynamically set -->
            <ul class="nav navbar-nav navbar-right">       
                <li class="navbar-brand">

                </li>
            </ul>
            <!-- / navbar right -->
        </div>
    </div>
  </div>
</nav>

<!-- HEADER ENDS HERE -->



 <div id="main" class="container-fluid searchPage-wrapper">
    <div class="row">
        <div class="col-lg-4">
        </div> 
        <div class="col-lg-8">
            <div id="searchPage-small-title">NBA</div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4">
        </div> 
        <div class="col-lg-8">
            <div id="searchPage-title">Player Portal</div>
        </div>    
    <div class="row">
        <div class="col-lg-12">  
            <div class="searchPage-box text-left">           
                <form role="form" class="form-inline" ng-submit="submit()">             
                  <div class="form-group">             
                    <div class="row">
                        <div class="col-lg-11">
                            <input type="text" class="searchPage-input" autocomplete="off"  ng-model="selected" placeholder="Search Player"
                                typeahead="sponsor as label(sponsor) for sponsor in sponsorList
                                | filter:$viewValue | limitTo:12" typeahead-editable="true" typeahead-min-length="2"
                                required="" name="sponsorName">
                        </div>          
                        <div class="col-md-1">      
                        <!-- using Bootstrap default for button -->


                        </div>                   
                    </div>
                </div>  
              </form> 
            </div>      
        </div>
    </div>  

    <div class="row">
        <div class="col-lg-4">
        </div> 
        <div class="col-lg-8">
            <div id="searchPage-favorites-title" class="row">FAVORITES</div>
        </div>
    </div>


    <div class="row">
        <div class="col-sm-4">
        </div>

        <!-- this favorites are hard-coded for now for purposes of demo -->
        <div class="col-sm-2 searchPage-favorites-item" >
            <i class="fa fa-star"></i>
            Lebron
        </div>
        <div class="col-sm-2 searchPage-favorites-item" >
            <i class="fa fa-star"></i>
            Curry
        </div>
        <div class="col-sm-2 searchPage-favorites-item" >
            <i class="fa fa-star"></i>
            Jordan
        </div>

    </div>
    <div class="row">
        <div class="col-sm-12">
            &nbsp;
        </div>      
    </div>
        </div>      
    </div>
     <div class="row">
        <div class="col-sm-12">
            &nbsp;
        </div>      
    </div>    
    <div class="row">
        <div class="col-sm-12">
            &nbsp;
        </div>      
    </div>   
    <div class="row">
        <div class="col-sm-12">
            &nbsp;
        </div>      
    </div>
<div class="main-footer wrapper b-t">
    <div class="row">
        <div class="col-sm-2">
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
        &nbsp;
        </div>
    </div>  
    <div class="row">
        <div class="col-sm-3">
        </div>      
        <div class="col-sm-9 subtext">    
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAH&#174;BLAH BLAH BLAH BLAH BLAH
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
        </div>         
        <div class="col-sm-9 subtext">    
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAH
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
        </div>         
        <div class="col-sm-9 subtext">  
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAH
        </div>
    </div>      
    <div class="row">
        <div class="col-sm-3">
        </div>              
        <div class="col-sm-9 subtext"> 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAH BLAH BLAH
        </div>
    </div>  
    <div class="row">
        <div class="col-sm-3">
        </div>              
        <div class="col-sm-9 subtext"> 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        BLAH BLAH BLAH BLAH BLAH
        </div>
    </div>      

</div>

3 个答案:

答案 0 :(得分：1)

抱歉，我的联系是慢慢打开jsfiddle，但我明白了。 基本上，你只需要将div分开，然后为该div提供适当的颜色。

//navbar
<div class="container-fluid">
    <div class="row bg-success">//bg-success is green color
        //player portal
        //search form
    </div>

    <div class="row">
        //favorites
    </div>
</div>
//footer

你要做的就是给这两个部分添加颜色，这就是为什么两个部分都有相同的背景颜色。

UPDATE 这里的例子是：Here

答案 1 :(得分：1)

要添加该背景的区域不是单个容器，而只能通过多个容器进行寻址。因此，首先为具有所需背景的类创建CSS规则：

    /**
       * Print detail information about revisions of the specified file.
       *
       * @param service Drive API service instance.
       * @param fileId ID of the file to print revisions for.
    */
    private static void detailedRevisions(Drive service, String fileId) {
        try {
           RevisionList revisions = service.revisions().list(fileId).execute();
           List<Revision> revisionList = revisions.getItems();

           for(Revision revision : revisionList) {
               revision = service.revisions().get(
                 fileId, revision.getId()).execute();

               System.out.println("Revision ID: " + revision.getId());
               System.out.println("Modified Date: " + revision.getModifiedDate());
               if (revision.getPinned()) {
                   System.out.println("This revision is pinned");
               }
           }
        } catch (IOException e) {
            System.out.println("An error occured: " + e);
        }
    }

然后将该类添加到应在HTML中受影响的所有容器中。只要看看我添加它的小提琴：

https://jsfiddle.net/02j94gmo/1/

答案 2 :(得分：1)

试试这个简单的，希望它可以帮到你。

HTML 

<html>
  <head>
    <!--<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet" type="text/css" />-->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div id="player">
          Top here
        </div>
      </div>
      <div class="row">
        <div id="favorites">
          favorites
        </div>
      </div>
      <div class="row">
        <div id="footer">
          footer
        </div>
      </div>
    </div>
  </body>
</html>

CSS 

body {background-color: blue;}
#player {
  background-color: white;
  padding: 25px; 
}
#favorites {
  background-color: #00897b;
  padding: 25px; 
}
#footer {
  background-color: #a5a5a5;
  padding: 25px; 
}
相关问题
最新问题