html - 如何使响应式引导元素方形
问题描述
我正在尝试为优惠券制作页面,这是 HTML 代码:
<!-- Content -->
<div class="section section-contents section-pad">
<div class="container">
<div class="content row">
<div class="row row-feature row-column">
<!-- Coupon Boxes -->
<div class="col-md-4 col-sm-4">
<div class="feature boxed coupon">
<div class="fbox-content center">
<span class="scissors">
<i class="fa fa-scissors"></i>
</span>
<h2>Residential Plumbing</h2>
<p>Lorem ipsum dolor sit amet, conse ctetur adip isicing elit, sed do eius mod tempor incididunt fuga platea ut labore et.</p>
<p class="fineprint" >Valid Mon-Sat 7AM-7PM. Cannot be combined with any other offer<br>Offer Expires: <?php echo date("m/d/y",strtotime("last day of +0 month")); ?></p>
</div>
</div>
</div>
<!-- End Coupon box -->
<!-- Coupon Boxes -->
<div class="col-md-4 col-sm-4">
<div class="feature boxed coupon">
<div class="fbox-content center">
<span class="scissors">
<i class="fa fa-scissors"></i>
</span>
<h2>Residential Plumbing</h2>
<p>Lorem ipsum dolor sit amet, conse ctetur adip isicing elit, sed do eius mod tempor incididunt fuga platea ut labore et.</p>
<p class="fineprint" >Valid Mon-Sat 7AM-7PM. Cannot be combined with any other offer<br>Offer Expires: <?php echo date("m/d/y",strtotime("last day of +0 month")); ?></p>
</div>
</div>
</div>
<!-- End Coupon box -->
<!-- Coupon Boxes -->
<div class="col-md-4 col-sm-4">
<div class="feature boxed coupon">
<div class="fbox-content center">
<span class="scissors">
<i class="fa fa-scissors"></i>
</span>
<h2>Residential Plumbing</h2>
<p>Lorem ipsum dolor sit amet, conse ctetur adip isicing elit, sed do eius mod tempor incididunt fuga platea ut labore et.</p>
<p class="fineprint" >Valid Mon-Sat 7AM-7PM. Cannot be combined with any other offer<br>Offer Expires: <?php echo date("m/d/y",strtotime("last day of +0 month")); ?></p>
</div>
</div>
</div>
<!-- End Coupon box -->
</div>
<!-- End Feature Boxes -->
</div>
</div>
</div>
<!-- End content -->
这是我写的CSS:
.coupon{
border-style: dashed;
border-color: black;
padding: 15px;
min-height: 350px;
vertical-align: middle !important;
}
.fineprint{
font-size: 11px;
vertical-align: bottom;
}
.scissors{
font-size: 48px;
color: #000;
vertical-align: top;
}
我希望带有虚线的框是方形的。它在台式机和移动设备上看起来不错,但在平板电脑上它不是方形的。无论格式如何,我都希望它是一个完美的正方形。我怎样才能做到这一点?提前致谢!
解决方案
您可以将它们堆叠在中、小和超小屏幕上。在不隐藏它们的情况下将它们与您的所有内容排成一行是非常困难的。
.coupon {
border-style: dashed;
border-color: black;
padding: 15px;
max-height: 320px;
max-width: 320px;
overflow: hidden;
vertical-align: middle !important;
margin: 10px;
}
.fineprint {
font-size: 11px;
vertical-align: bottom;
}
.scissors {
font-size: 48px;
color: #000;
vertical-align: top;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template</title>
<!-- bootstrap 4.4 -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
</head>
<body>
<!-- Content -->
<div class="section section-contents section-pad">
<div class="container">
<div class="content row">
<div class="row row-feature row-column justify-content-between">
<!-- Coupon Boxes -->
<div class="col-lg-4 ">
<div class="feature boxed coupon">
<div class="fbox-content center">
<span class="scissors">
<i class="fa fa-scissors"></i>
</span>
<h2>Residential Plumbing</h2>
<p>
Lorem ipsum dolor sit amet, conse ctetur adip isicing elit,
sed do eius mod tempor incididunt fuga platea ut labore et.
</p>
<p class="fineprint">
Valid Mon-Sat 7AM-7PM. Cannot be combined with any other
offer<br />Offer Expires:
<?php echo date("m/d/y",strtotime("last day of +0 month")); ?>
</p>
</div>
</div>
</div>
<!-- End Coupon box -->
<!-- Coupon Boxes -->
<div class="col-lg-4 ">
<div class="feature boxed coupon">
<div class="fbox-content center">
<span class="scissors">
<i class="fa fa-scissors"></i>
</span>
<h2>Residential Plumbing</h2>
<p>
Lorem ipsum dolor sit amet, conse ctetur adip isicing elit,
sed do eius mod tempor incididunt fuga platea ut labore et.
</p>
<p class="fineprint">
Valid Mon-Sat 7AM-7PM. Cannot be combined with any other
offer<br />Offer Expires:
<?php echo date("m/d/y",strtotime("last day of +0 month")); ?>
</p>
</div>
</div>
</div>
<!-- End Coupon box -->
<!-- Coupon Boxes -->
<div class="col-lg-4 ">
<div class="feature boxed coupon">
<div class="fbox-content center">
<span class="scissors">
<i class="fa fa-scissors"></i>
</span>
<h2>Residential Plumbing</h2>
<p>
Lorem ipsum dolor sit amet, conse ctetur adip isicing elit,
sed do eius mod tempor incididunt fuga platea ut labore et.
</p>
<p class="fineprint">
Valid Mon-Sat 7AM-7PM. Cannot be combined with any other
offer<br />Offer Expires:
<?php echo date("m/d/y",strtotime("last day of +0 month")); ?>
</p>
</div>
</div>
</div>
<!-- End Coupon box -->
</div>
<!-- End Feature Boxes -->
</div>
</div>
</div>
<!-- End content -->
<!-- Bootstrap js ,popper js and jquery -->
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
</body>
</html>
推荐阅读
- python - 这两种python导入方式是不是一模一样?
- javascript - 如何用while循环而不是Javascript中的for循环重写这个程序?
- wpf - 更新的值未反映在 WPF 的 UI 中
- ios - fs-Calendar 的select 方法是否导致显示错误的日期?
- google-maps-timezone - 谷歌地图 timzezone API
- angular - NgRx:选择器在转换到不同页面时被调用
- node.js - react-stripe-checkout onToken 传参或访问状态
- xcode - Xcode 8.2.1 兼容性
- json - 使用接口将 JSON 字符串解组为数组
- java - Spring Data Rest 中是否有参数的“预测”?