在将边框放在容器外部的某个部分的最左侧时,我遇到了问题。我尝试在容器流体上放置一个左边距,但是该行应仅与该部分内嵌。现在,该行在蓝线中。请查看图片以获得更好的解释。
这是当前代码
.store_details_item_wrapper {
padding-left: 20px;
border-left: 10px solid blue;
}
.store_details_img_wrapper {
border: 5px solid black;
height: 100px;
width: 100px;
margin-bottom: 15px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="section-wrapper">
<div class="container">
<div class="row store_details_row">
<div class="store_details col col-md-4 order-12 order-md-1">
<div class="store_details_img_wrapper">
<img class="store_details_img" media={props.fields.logo} />
</div>
<div class="store_details_item_wrapper">
<div class="store_details_item">
<i class="fa fa-clock" />
Text here
</div>
<hr />
<div class="store_details_item">
<i class="fa fa-parking" />
Text here
</div>
</div>
</div>
<div class="store_description col-12 col-md-8 order-1 order-md-12">
<Image
class="store_description_banner img-fluid"
media={props.fields.herobanner}
/>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
自从您使用border-left
以来,这就是1个解决方案。
或者您可以使用position: absolute
并保留negative
值到.store_details_item_wrapper
.store_details_item_wrapper {
padding-left: 60px;
border-left: 10px solid blue;
margin-left: -70px;
}
.store_details_img_wrapper {
border: 5px solid black;
height: 100px;
width: 100px;
margin-bottom: 15px;
}
.container-fluid{
border: 2px solid black;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="container">
<div class="row store_details_row">
<div class="store_details col col-md-4 order-12 order-md-1">
<div class="store_details_img_wrapper">
<img class="store_details_img" media={props.fields.logo} />
</div>
<div class="store_details_item_wrapper">
<div class="store_details_item">
<i class="fa fa-clock" /> Text here
</div>
<hr />
<div class="store_details_item">
<i class="fa fa-parking" /> Text here
</div>
</div>
</div>
<div class="store_description col-12 col-md-8 order-1 order-md-12">
<Image class="store_description_banner img-fluid" media={props.fields.herobanner} />
</div>
</div>
</div>
</div>