当页面宽度增加到允许三列时,我如何将这些<hr/>
标记自动更改为垂直线?在小型设备上,它们可以正确地分隔行。我使用的是Bootstrap v4。
<div class="row">
<div class="col-md-4 col-sm-6 p-4">
<h2>Have a Question?</h2>
</div>
<div class="col-md-4 col-sm-6 text-center p-4">
<hr/>
<h3>FAQs</h3>
<p>Get more information about ordering, payments and product delivery.</p>
</div>
<div class="col-md-4 col-sm-6 text-center p-4">
<hr />
<h3 class="mb-4">Call Us</h3>
<p>Contact our product specialists</p>
</div>
</div>
2条答案
按热度按时间egdjgwm81#
尝试使用媒体查询隐藏hr,然后添加左边框,更改
min-width: 600px
以匹配您的目标屏幕大小test here on jsfiddle
第一个
js4nwp542#
因为没有
vertical-rule
元素,所以这很坚韧,因为唯一的选择是使用transform: rotate(90deg);
。但是,这并不满足分隔符的定位。相反,请使用
border
和padding
来定位分隔线。第一个