📌  相关文章
📜  如何使用Bootstrap在移动设备上创建缩小到全宽的自适应网站?

📅  最后修改于: 2021-05-25 16:44:36             🧑  作者: Mango

容器类:这是引导程序的预定义类之一,它包含网页中的全部内容。有两个容器类,即容器容器流体类。这些类具有不同的属性,并且可以使用适合自己需求的类。

容器流体:当将网页内容包含在具有容器流体类的div元素中时,div中包含的所有元素都将填充到设备的整个宽度。

容器:如果将网页内容包含在具有容器类的div元素中,则div中包含的所有元素都不会填充到设备的整个宽度。相反,对于每个标准屏幕大小的断点,都预定义了媒体查询。
例如:

  • @media (min-width: 1200px)
    .container {
        max-width: 1140px;}
  • @media (min-width: 992px)
    .container {
        max-width: 960px;
    }

显然,使用容器类将提供一定量的左右边距,这是默认值,并且对于各种屏幕尺寸而言都是不同的。但是,有一个例外,当屏幕大小从平板电脑大小更改为移动大小时,容器类后面的媒体查询会自动更改,以占据屏幕100%的宽度。

  • 。容器 {
    宽度:100%;
    padding-right:15像素;
    padding-left:15px;
    右边距:自动;
    左边距:自动;
    }

示例:以下示例是适合于设备屏幕宽度的自适应网页。



    
        Responsive Div
        
  
        
    
    
        
            
                

                    Geeks for Geeks                 

            
            
            
            
            

About:

            GeeksforGeeks.org was created with a goal           in mind to provide well written, well thought           and well explained solutions for selected            questions. The core team of five super geeks           constituting of technology lovers and computer           science enthusiasts have been constantly            working in this direction.             
            
            
            

List of all things available:

            
                    
  • Courses
  •                 
  • Internships
  •                 
  • Coding Practice Platforms
  •                 
  • Company Specific Practice Platforms
  •                 
  • Interview Corner
  •                 
  • Subject Wise Practice Questions
  •             
            
and all things TECH!
        
                                     

输出:

  • 在手机中(425 px)