css3媒体查询bootstrap

时间：2016-08-09 05:00:05

标签： html5 twitter-bootstrap css3

我想在浏览器屏幕变得更窄时在一行中显示两个相同大小的部分，而第三部分应该占据下一整行，但它没有正确对齐，有人帮助我并检查我的代码在哪里代码中的问题

 <!DOCTYPE html> 
     <html> 
     <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Responsive Layout</title> 
     <style> 

     /********** Base styles **********/ 
     * { 
       box-sizing: border-box; 
     } 
     h1 { 
      margin-bottom: 15px; 
     } 

     p { 
       border: 1px solid black; 
       background-color: #A52A2A; 
       width: 90%; 
       height: 150px; 
       margin-right: auto; 
       margin-left: auto; 
       font-family: Helvetica; 
       color: white; 
     } 

     /* Simple Responsive Framework. */ 
     .row { 
       width: 100%; 
     }


     /********** Large devices only **********/ 
     @media (min-width: 1200px) { 
       .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{ 

         float: left; 
         border: 1px solid green; 
       } 
        .col-lg-1 { 
         width: 8.33%; 
       } 
       .col-lg-2 { 
         width: 16.66%; 
       } 
       .col-lg-3 { 
         width: 25%; 
       } 
       .col-lg-4 { 
         width: 33.33%; 
       } 
       .col-lg-5 { 
         width: 41.66%; 
       } 
       .col-lg-6 { 
         width: 50%; 
       } 
       .col-lg-7 { 
         width: 58.33%; 
       } 
       .col-lg-8 { 
         width: 66.66%; 
       } 
       .col-lg-9 { 
         width: 74.99%; 
       } 
       .col-lg-10 { 
         width: 83.33%; 
       } 
       .col-lg-11 { 
         width: 91.66%; 
       } 
       .col-lg-12 { 
         width: 100%; 
       } 
     } 

     /********** Medium devices only **********/ 
     @media (min-width: 992px) and (max-width: 1199px) { 
       .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { 
         float: left; 
         border: 1px solid green;
       } 
       .col-md-1 { 
         width: 8.33%; 
       } 
       .col-md-2 { 
         width: 16.66%; 
       } 
       .col-md-3 { 
         width: 25%; 
       } 
       .col-md-4 { 
         width: 33.33%; 
       } 
       .col-md-5 { 
         width: 41.66%; 
       } 
       .col-md-6 { 
         width: 50%; 
       } 
       .col-md-7 { 
         width: 58.33%; 
       } 
       .col-md-8 { 
         width: 66.66%; 
       } 
       .col-md-9 { 
         width: 74.99%; 
       } 
       .col-md-10 { 
         width: 83.33%; 
       } 
       .col-md-11 { 
         width: 91.66%; 
       } 
       .col-md-12{ 
         width:100%;   
        } 
     } 

     </style> 
     </head> 
     <body> 
     <h1>Responsive Layout</h1> 

     <div class="row"> 
       <div class="col-lg-4 col-md-6"><p>Item 1</p></div> 
       <div class="col-lg-4 col-md-6"><p>Item 2</p></div>   
       <div class="col-lg-4 col-md-12"><p>Item 3</p></div> 
     </div> 
     </body> 
     </html>

2 个答案:

答案 0 :(得分：0)

请从删除宽度属性：＆＃34; .p＆＃34; 或指定＆＃39; 100％＆＃39;宽度 

p {
   border: 1px solid black;
   background-color: #A52A2A;
   /*width: 90%;*/
   height: 150px;
   margin-right: auto;
   margin-left: auto;
   font-family: Helvetica;
   color: white;
 }

<强> CSS 

/********** Base styles **********/
* {
    box-sizing: border-box;
}

h1 {
    margin-bottom: 15px;
}

p {
    border: 1px solid black;
    background-color: #A52A2A;
    /*width: 90%;*/
    height: 150px;
    margin-right: auto;
    margin-left: auto;
    font-family: Helvetica;
    color: white;
}

/* Simple Responsive Framework. */
.row {
    width: 100%;
}

.divBlock {
    background-color: gray;
    min-height: 150px;
    border: 2px solid black;
}

    .divBlock .divBlockTitle {
        background-color: brown;
        border: 2px solid black;
        border-top: 0px;
        border-right: 0px;
        float: right;
        padding: 3px 10px;
    }
    .divBlock .divText{
        clear:both;
        margin:30px 10px 10px;
    }
    .divBlock .divBlockTitle.darksalmon{
        background-color:darksalmon;
    }
    .divBlock .divBlockTitle.brown{
        background-color:brown;
        color:white;
    }
    .divBlock .divBlockTitle.bisque{
        background-color:bisque;        
    }
    .ourMenu{
        text-align: center;
    }

    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9
    {
        padding-bottom:15px;
    }
/********** Large devices only **********/
@media (min-width: 1200px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        float: left;
        /*border: 1px solid green;*/
    }

    .col-lg-1 {
        width: 8.33%;
    }

    .col-lg-2 {
        width: 16.66%;
    }

    .col-lg-3 {
        width: 25%;
    }

    .col-lg-4 {
        width: 33.33%;
    }

    .col-lg-5 {
        width: 41.66%;
    }

    .col-lg-6 {
        width: 50%;
    }

    .col-lg-7 {
        width: 58.33%;
    }

    .col-lg-8 {
        width: 66.66%;
    }

    .col-lg-9 {
        width: 74.99%;
    }

    .col-lg-10 {
        width: 83.33%;
    }

    .col-lg-11 {
        width: 91.66%;
    }

    .col-lg-12 {
        width: 100%;
    }
}

/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;
        /*border: 1px solid green;*/
    }

    .col-md-1 {
        width: 8.33%;
    }

    .col-md-2 {
        width: 16.66%;
    }

    .col-md-3 {
        width: 25%;
    }

    .col-md-4 {
        width: 33.33%;
    }

    .col-md-5 {
        width: 41.66%;
    }

    .col-md-6 {
        width: 50%;
    }

    .col-md-7 {
        width: 58.33%;
    }

    .col-md-8 {
        width: 66.66%;
    }

    .col-md-9 {
        width: 74.99%;
    }

    .col-md-10 {
        width: 83.33%;
    }

    .col-md-11 {
        width: 91.66%;
    }

    .col-md-12 {
        width: 100%;
    }
}

<强> HTML 

<h3 class="ourMenu">Our Menu</h3>

<div class="row">
    <div class="col-lg-4 col-md-6">
        <div class="divBlock">
            <div class="divBlockTitle darksalmon">Chicken</div>
            <div class="divText">I wanted To Show two Sections in one row both of equal size's when the browser screen become narrower and the third sections should occupy the next whole row but it is not aligned properly kindly some one help me out and check my code where is the problem in code</div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="divBlock">
            <div class="divBlockTitle brown">Beef</div>
            <div class="divText">I wanted To Show two Sections in one row both of equal size's when the browser screen become narrower and the third sections should occupy the next whole row but it is not aligned properly kindly some one help me out and check my code where is the problem in code</div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6">
        <div class="divBlock">
            <div class="divBlockTitle bisque">Sushi</div>
            <div class="divText">I wanted To Show two Sections in one row both of equal size's when the browser screen become narrower and the third sections should occupy the next whole row but it is not aligned properly kindly some one help me out and check my code where is the problem in code</div>
        </div>
    </div>
</div>

答案 1 :(得分：0)

只需使用正确的bootstrap类属性。

p {
   border: 1px solid black;
   background-color: #A52A2A;
   width: 100%;
   margin-right: auto;
   margin-left: auto;
   font-family: Helvetica;
   color: white;
 }

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    border: 1px solid rgb(0, 128, 0);
    float: left;
    padding: 0 15px;
}
相关问题
最新问题