【发布时间】：2018-11-30 16:59:29
【问题描述】：
我正在创建一个设计页面，左侧有 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编写的
【问题讨论】：
标签： css bootstrap-4