Fatal编程技术网
  • html/
  • Html css3媒体查询引导

Html css3媒体查询引导

html twitter-bootstrap css

Html css3媒体查询引导,html,twitter-bootstrap,css,Html,Twitter Bootstrap,Css,当浏览器屏幕变窄时，我想在一行中显示两个大小相同的部分，第三个部分应该占据下一整行，但没有正确对齐。请有人帮助我检查代码代码中的问题在哪里 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

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

 <!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> 


响应式布局
/**********基本样式*********/
* { 
框大小：边框框；
} 
h1{
边缘底部：15px；
} 
p{
边框：1px纯黑；
背景色：#A52A2A；
宽度：90%；
高度：150像素；
右边距：自动；
左边距：自动；
字体系列：Helvetica；
颜色：白色；
} 
/*简单响应框架。*/
.第{
宽度：100%；
}
/**********仅限大型设备********/
@介质（最小宽度：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{
浮动：左；
边框：1px纯绿色；
} 
.col-lg-1{
宽度：8.33%；
} 
.col-lg-2{
宽度：16.66%；
} 
.col-lg-3{
宽度：25%；
} 
.col-lg-4{
宽度：33.33%；
} 
.col-lg-5{
宽度：41.66%；
} 
.col-lg-6{
宽度：50%；
} 
.col-lg-7{
宽度：58.33%；
} 
col-lg-8{
宽度：66.66%；
} 
col-lg-9{
宽度：74.99%；
} 
col-lg-10{
宽度：83.33%；
} 
col-lg-11{
宽度：91.66%；
} 
col-lg-12{
宽度：100%；
} 
} 
/**********仅限中型设备*********/
@介质（最小宽度：992px）和（最大宽度：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{
浮动：左；
边框：1px纯绿色；
} 
.col-md-1{
宽度：8.33%；
} 
.col-md-2{
宽度：16.66%；
} 
col-md-3{
宽度：25%；
} 
col-md-4{
宽度：33.33%；
} 
col-md-5{
宽度：41.66%；
} 
col-md-6{
宽度：50%；
} 
col-md-7{
宽度：58.33%；
} 
col-md-8{
宽度：66.66%；
} 
col-md-9{
宽度：74.99%；
} 
col-md-10{
宽度：83.33%；
} 
col-md-11{
宽度：91.66%；
} 
col-md-12{
宽度：100%；
} 
} 
响应式布局
项目1

项目2

项目3
请从类中删除width属性：“.p”或指定“100%”宽度

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>

我们的菜单
鸡
当浏览器屏幕变窄时，我想在一行中显示两个大小相同的部分，第三个部分应该占据下一整行，但没有正确对齐。请有人帮助我检查代码代码中的问题在哪里
牛肉
当浏览器屏幕变窄时，我想在一行中显示两个大小相同的部分，第三个部分应该占据下一整行，但没有正确对齐。请有人帮助我检查代码代码中的问题在哪里
寿司
当浏览器屏幕变窄时，我想在一行中显示两个大小相同的部分，第三个部分应该占据下一整行，但没有正确对齐。请有人帮助我检查代码代码中的问题在哪里
只需使用正确的引导类属性即可

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;
}
[我想把我的html页面显示得一模一样][1][1]：`橙色我已经在我的帖子中更新了新的html和css，请看我有没有检查图片我如何在段落中添加标题并将标题对齐到最右边