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;
  }

如何在不移动元素的情况下在边框和元素之间创建空格

1 个答案: