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

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>

那么问题就是物体在移动，边框在同一个地方。我认为 padding-left 属性应用于对象而不是对象的边框。这是 link

Answer 1

请检查这是否是您要查找的内容？

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