如何在不移动元素的情况下在边框和元素之间留出空格?

Question

我正在设计一个应用程序，然后我正在使用css和bootstrap。我想在我的左边框和我的对象(元素(之间留出空间而不移动对象。我只想移动左边框。这是我的代码：

<div class="row">
<div class="form-group col-md-6">
<legend> hello </legend>
{{ form_label(form.hello , 'hello') }}
{{ form_errors(form.hello) }}
{{ form_widget(form.hello, {'attr': {'class': 'form-control'}})}}
</div>
<div class="form-group col-md-6 border-left">
<legend> Ok </legend>
{{ form_label(form.name , 'Name') }}
{{ form_errors(form.name) }}
{{ form_widget(form.name, {'attr': {'class': 'form-control'}})}}
</div>
</div>
<style>
.border-left{
border: 1px solid black;
position: relative;
padding-left: 200px;
padding-right: 0px !important;
}
</style>

那么问题是物体在移动，边框在同一个地方。我认为左填充属性应用于对象而不是对象的边框。这是链接

Answer 1

你能检查一下这是否是你要找的吗？

.border-left{
border: 1px solid black;
position: relative;
padding: 10px 20px 10px 40px;
margin-left: 20px;
}
.row {
display: flex;
align-items: center;
}