css - Bootstrap 4 :How to make page to run in responsive

标签 css bootstrap-4

我正在创建一个设计页面，左侧有 2 个框，右侧有 3 个框。 它在桌面上运行良好，现在我希望该框在移动设备上显示为单个但无法弄清楚。 以下是我的代码:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<style>
/* div partition */
#homecategory {    clear: both;     padding: 0 10px;    max-width: 1230px;    margin: 0 auto;}
.category {    position: relative;    margin-bottom: 20px;}
.left-image {    float: left;    width: 49%;    margin-right: 1%;}
.right-image {    float: left;    width: 49%;    margin-left: 1%;}


/* animation start here */
.cf:before,.cf:after{  display: table;  content: " ";}
.cf:after{  clear: both}

.catnamediv {   position: absolute; top: 35%;   width: 100%;    text-align: center; color: #fff;    text-transform: uppercase;  font-size: 25px;    z-index: 99;    font-weight: bold;  }

 .catnamediv a {    display: none;    width: 180px;    margin: 30px auto;    background: #297fca;    color: #fff;    font-size: 20px;    padding: 10px 0;   text-decoration: none;}

.fancy-card:hover .shopnow{   display: block;}

/*fancy card styling*/

.fancy-card{  background: #eee;  width: 100%;  display: block;  float: left;  position: relative;  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);  transition: all 250ms ease-in; min-height:288px;  background-size: cover;  background-position: center center;  margin-bottom: 30px;  }

.fancy-card .bg-overlay{    background: rgba(0,0,0,0.25);    position: absolute;    top: 0px;    left: 0px;
    width: 100%;    height: 100%;    transition: all 200ms linear;}

.category :hover p {    border-bottom: 1px solid #fff;    display: inline; padding-bottom: 12px;}

/*horizontal border elements (top & bottom)*/

.fancy-card .v-border{  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;   }
.fancy-card .v-border:before,.fancy-card .v-border:after{  width: 0%;  height: 1px;  left: 50%;  transition: all 250ms ease-out;  background: #fff; }
.fancy-card .v-border:before{  content: '';  top: 3%;  position: absolute;}
.fancy-card .v-border:after{  content: '';  bottom:3%;  position: absolute;}

/*horizontal elements (left & right)*/
.fancy-card .h-border{  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;}
.fancy-card .h-border:before,.fancy-card .h-border:after{  height: 0%;  top: 50%;  width: 1px;
  transition: all 250ms ease-out;  background: #fff;}
.fancy-card .h-border:before{  content: '';  left: 3%;  height: 0%;  position: absolute;    }
.fancy-card .h-border:after{  content: '';  right:3%;  position: absolute;  }


/*hover states for interactivity*/

.fancy-card:active .v-border:before,.fancy-card:active .v-border:after,.fancy-card:hover .v-border:before,
.fancy-card:hover .v-border:after{  width: 94%;  left: 3%;  }
.fancy-card:active .h-border:before,.fancy-card:active .h-border:after,.fancy-card:hover .h-border:before,
.fancy-card:hover .h-border:after{  height: 94%;  top: 3%;  }

/*hovering over card, adjust background overlay*/

.fancy-card:active .bg-overlay,.fancy-card:hover .bg-overlay{  background: rgba(0,0,0,0.45);    }

/*medium and large profiles*/
@media screen and (min-width: 768px){ 
  .fancy-card{    width: 30%;    margin: 0% 1.66% 3.33% 1.66%;  }  
}
/* title decorate */
.cattilewrap {    text-align: center;    padding: 20px 0;    text-transform: uppercase;    position: relative;
    background: #fff;    z-index: -1;margin-top: 2%;}
.catdnamediv2 {    font-size: 30px;    font-weight: 500;    background: #fff;}
.catdnamediv2 span {  display: inline-block;  position: relative;  }
.catdnamediv2 span:before,.catdnamediv2 span:after {  content: "";  position: absolute;  height: 5px;
  border-bottom: 1px solid #0088cc;  border-top: 1px solid #0088cc;  top: 0;  width: 100%;}
.catdnamediv2 span:before {  right: 100%;  margin-right: 15px;}
.catdnamediv2 span:after {  left: 100%;  margin-left: 15px;}
</style>
</head>
<body>
<div id="homecategory" class="home-category ">      
        <div class="cattilewrap">
            <div class="col-12 d-flex justify-content-center catdnamediv1">Shop By</div>
            <div class="col-12 d-flex justify-content-center catdnamediv2"><span>Category</span></div>
         </div>
        <div class="row cf ">

            <div class="col-md-6">
            <div class=" left-image" >
                <div class="category cat01 fancy-card" style=" background-image:url('_2.jpg');width:593px;height:436px;">       
                    <div class="bg-overlay"></div>
                    <div class="v-border"></div>
                    <div class="h-border"></div>    
                    <div class="catnamediv">
                        <p>sectional sofa</p>
                        <a class="shopnow" href="#">shop now</a>
                    </div>      
                </div>
                <div class="category cat02 fancy-card" style=" background-image:url('_3.jpg');width:593px;height:436px;">                   
                    <div class="bg-overlay"></div>
                    <div class="v-border"></div>
                    <div class="h-border"></div>    
                    <div class="catnamediv">
                        <p>sectional sofa</p>
                        <a class="shopnow" href="#">shop now</a>
                    </div>  
                </div>
            </div>
            </div>
            <div class="col-md-6">
            <div class=" right-image" >
                <div class="category cat03 fancy-card" style=" background-image:url('_1.jpg');width:593px;height:279px;">
                    <div class="bg-overlay"></div>
                    <div class="v-border"></div>
                    <div class="h-border"></div>    
                    <div class="catnamediv">
                        <p>sectional sofa</p>
                        <a class="shopnow" href="#">shop now</a>
                    </div>  
                </div>
                <div class="category cat04 fancy-card" style=" background-image:url('_4.jpg');width:593px;height:279px;">                   
                    <div class="bg-overlay"></div>
                    <div class="v-border"></div>
                    <div class="h-border"></div>    
                    <div class="catnamediv">
                        <p>sectional sofa</p>
                        <a class="shopnow" href="#">shop now</a>
                    </div>  
                </div>

                <div class="category cat05 fancy-card" style=" background-image:url('cat5.jpg');width:593px;height:279px;">                 
                    <div class="bg-overlay"></div>
                    <div class="v-border"></div>
                    <div class="h-border"></div>    
                    <div class="catnamediv">
                        <p>sectional sofa</p>
                        <a class="shopnow" href="#">shop now</a>
                    </div>  
                </div>
            </div>
            </div>
        </div>
</div>


</body>
</html>

我还在 jsfiddle 中粘贴了这段代码 https://jsfiddle.net/arunendra/w8yhmt70/1/#&togetherjs=Mt5zNmbI7k

这段代码是用html和bootsrap4写的

最佳答案

您可以在代码中放置 width:100%;height:100%; 而不是 width:593px;height:436px; 并添加以下代码移动 View 中的单个框。

    @media screen and (max-width: 768px){ 
      .left-image {    width: 100%;    margin-right: 0;}
      .right-image { width: 100%;    margin-left: 0;}
    }

    <!DOCTYPE html>
    <html lang="en-US">
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <style>
    /* div partition */
    #homecategory {    clear: both;     padding: 0 10px;    max-width: 1230px;    margin: 0 auto;}
    .category {    position: relative;    margin-bottom: 20px;}
    .left-image {    float: left;    width: 49%;    margin-right: 1%;}
    .right-image {    float: left;    width: 49%;    margin-left: 1%;}


    /* animation start here */
    .cf:before,.cf:after{  display: table;  content: " ";}
    .cf:after{  clear: both}

    .catnamediv {   position: absolute; top: 35%;   width: 100%;    text-align: center; color: #fff;    text-transform: uppercase;  font-size: 25px;    z-index: 99;    font-weight: bold;  }

     .catnamediv a {    display: none;    width: 180px;    margin: 30px auto;    background: #297fca;    color: #fff;    font-size: 20px;    padding: 10px 0;   text-decoration: none;}

    .fancy-card:hover .shopnow{   display: block;}

    /*fancy card styling*/

    .fancy-card{  background: #eee;  width: 100%;  display: block;  float: left;  position: relative;  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);  transition: all 250ms ease-in; min-height:288px;  background-size: cover;  background-position: center center;  margin-bottom: 30px;  }

    .fancy-card .bg-overlay{    background: rgba(0,0,0,0.25);    position: absolute;    top: 0px;    left: 0px;
        width: 100%;    height: 100%;    transition: all 200ms linear;}

    .category :hover p {    border-bottom: 1px solid #fff;    display: inline; padding-bottom: 12px;}

    /*horizontal border elements (top & bottom)*/

    .fancy-card .v-border{  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;   }
    .fancy-card .v-border:before,.fancy-card .v-border:after{  width: 0%;  height: 1px;  left: 50%;  transition: all 250ms ease-out;  background: #fff; }
    .fancy-card .v-border:before{  content: '';  top: 3%;  position: absolute;}
    .fancy-card .v-border:after{  content: '';  bottom:3%;  position: absolute;}

    /*horizontal elements (left & right)*/
    .fancy-card .h-border{  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;}
    .fancy-card .h-border:before,.fancy-card .h-border:after{  height: 0%;  top: 50%;  width: 1px;
      transition: all 250ms ease-out;  background: #fff;}
    .fancy-card .h-border:before{  content: '';  left: 3%;  height: 0%;  position: absolute;    }
    .fancy-card .h-border:after{  content: '';  right:3%;  position: absolute;  }


    /*hover states for interactivity*/

    .fancy-card:active .v-border:before,.fancy-card:active .v-border:after,.fancy-card:hover .v-border:before,
    .fancy-card:hover .v-border:after{  width: 94%;  left: 3%;  }
    .fancy-card:active .h-border:before,.fancy-card:active .h-border:after,.fancy-card:hover .h-border:before,
    .fancy-card:hover .h-border:after{  height: 94%;  top: 3%;  }

    /*hovering over card, adjust background overlay*/

    .fancy-card:active .bg-overlay,.fancy-card:hover .bg-overlay{  background: rgba(0,0,0,0.45);    }

    /*medium and large profiles*/
    @media screen and (min-width: 768px){ 
      .fancy-card{    width: 30%;    margin: 0% 1.66% 3.33% 1.66%;  }  
    }
    /* title decorate */
    .cattilewrap {    text-align: center;    padding: 20px 0;    text-transform: uppercase;    position: relative;
        background: #fff;    z-index: -1;margin-top: 2%;}
    .catdnamediv2 {    font-size: 30px;    font-weight: 500;    background: #fff;}
    .catdnamediv2 span {  display: inline-block;  position: relative;  }
    .catdnamediv2 span:before,.catdnamediv2 span:after {  content: "";  position: absolute;  height: 5px;
      border-bottom: 1px solid #0088cc;  border-top: 1px solid #0088cc;  top: 0;  width: 100%;}
    .catdnamediv2 span:before {  right: 100%;  margin-right: 15px;}
    .catdnamediv2 span:after {  left: 100%;  margin-left: 15px;}
    </style>
    </head>
    <body>
    <div id="homecategory" class="home-category ">      
            <div class="cattilewrap">
                <div class="col-12 d-flex justify-content-center catdnamediv1">Shop By</div>
                <div class="col-12 d-flex justify-content-center catdnamediv2"><span>Category</span></div>
             </div>
            <div class="row cf ">

                <div class="col-md-6">
                <div class=" left-image" >
                    <div class="category cat01 fancy-card" style=" background-image:url('_2.jpg');width:100%;height:100%;">       
                        <div class="bg-overlay"></div>
                        <div class="v-border"></div>
                        <div class="h-border"></div>    
                        <div class="catnamediv">
                            <p>sectional sofa</p>
                            <a class="shopnow" href="#">shop now</a>
                        </div>      
                    </div>
                    <div class="category cat02 fancy-card" style=" background-image:url('_3.jpg');width:100%;height:100%;">                   
                        <div class="bg-overlay"></div>
                        <div class="v-border"></div>
                        <div class="h-border"></div>    
                        <div class="catnamediv">
                            <p>sectional sofa</p>
                            <a class="shopnow" href="#">shop now</a>
                        </div>  
                    </div>
                </div>
                </div>
                <div class="col-md-6">
                <div class=" right-image" >
                    <div class="category cat03 fancy-card" style=" background-image:url('_1.jpg');width:100%;height:100%;">
                        <div class="bg-overlay"></div>
                        <div class="v-border"></div>
                        <div class="h-border"></div>    
                        <div class="catnamediv">
                            <p>sectional sofa</p>
                            <a class="shopnow" href="#">shop now</a>
                        </div>  
                    </div>
                    <div class="category cat04 fancy-card" style=" background-image:url('_4.jpg');width:100%;height:100%;">                   
                        <div class="bg-overlay"></div>
                        <div class="v-border"></div>
                        <div class="h-border"></div>    
                        <div class="catnamediv">
                            <p>sectional sofa</p>
                            <a class="shopnow" href="#">shop now</a>
                        </div>  
                    </div>

                    <div class="category cat05 fancy-card" style=" background-image:url('cat5.jpg');width:100%;height:100%;">                 
                        <div class="bg-overlay"></div>
                        <div class="v-border"></div>
                        <div class="h-border"></div>    
                        <div class="catnamediv">
                            <p>sectional sofa</p>
                            <a class="shopnow" href="#">shop now</a>
                        </div>  
                    </div>
                </div>
                </div>
            </div>
    </div>


    </body>
    </html>

关于css - Bootstrap 4 :How to make page to run in responsive，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53553115/

上一篇：css - 修复 react-select 下拉列表的高度(React Material UI)

下一篇：javascript - document.lastModified 在 div 中使用 JQuery

相关文章：

用于生成css速记的php工具

css - 更改 bootstrap 4 中列之间的填充(如果可能，通过变量)

css - 如何定位移动设备的横向和纵向

html - 为什么::after 选择器在我的代码中不能正常工作？

html - 尝试在页面中间对齐我的选项卡并尽可能添加标题？

css - 将不同大小的文本对齐到底部

php - 仅带css的样式列表，不带js等

jquery - 当旁边的另一个 div 扩展时如何防止 div 移动

html - Bootstrap 粘性顶部导航栏在滚动时消失

html - 2 Accordion A 和 B 需要 Accordion A 第一类也打开 Accordion B 第一类，反之亦然

©2024 IT工具网  联系我们