如何将一列开始设置为仅在一列下没有行的空间

时间:2019-05-12 11:35:37

标签: html css twitter-bootstrap bootstrap-4

我需要在蓝色框位置放置“描述”列。 我可以不用将它放在下一行吗? 引导程序是否一直出现在下一行? help make it higher IMG

在secound示例中,我有显示问题的小部件,当我扩展一个小部件时,创建了缝隙,我需要其他列来填充此缝隙并更改其位置。

如何解决? example 2 base state

example 2 after expanding PROBLEM

谢谢

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class='col-12 col-sm-12 col-md-4 col-lg-4'>
  <div class='card-box'>
    <div class='row'>
      <div class='col-3'>
        <i class='fa fa-2x fa-building font-weight-light icon-circle'></i>
      </div>
      <div class='col-9'>
        <h4>
          <?php _e("CABINET"); ?>
          <?php echo $cabinet->cabinet_name; ?>
        </h4>
      </div>
      <div class='col-12 mt-3'>
        <p>
          <?php __meta('meta_description'); ?>
        </p>
      </div>
      <div class='col-12 col-sm-12 col-md-3 col-lg-5'>
        <p class='font-weight-bold m-0'>
          <?php _e("EMPLOYEE"); ?>:</p>
        <p>xx</p>
      </div>
      <div class='col-12 col-sm-12 col-md-4 col-lg-4'>
        <p class='font-weight-bold m-0'>Klienci:</p>
        <p>xx</p>
      </div>
      <div class='col-12 col-sm-12 col-md-5 col-lg-3'>
        <p class='font-weight-bold m-0'>Zabiegi:</p>
        <p>xx</p>
      </div>
      <div class="offset-md-2 col-8 mt-1">
        <a name="" id="" onclick="deleteCabinet(<?php echo $cabinet->cabinet_id ?>)" class="btn btn-primary w-100" href="#" role="button">
          <?php _e("REMOVE"); ?>
        </a>
      </div>
    </div>
  </div>
</div>
<!-------------------------------------------------------------->
<div class='col-12 col-sm-12 col-md-8 col-lg-8'>
  <div class='card-box details-data'>
    <form class="form-edit" method="POST" action="<?php Url::link('admin/cabinets/'.$cabinet->cabinet_id) ?>">
      <?php Form::method("PATCH"); ?>
      <div class='d-flex w-100 mb-3'>
        <h3 class='mb-0'>
          <?php _e("BASIC_DETAILS"); ?>
        </h3>
        <button type='button' class='btn btn-custom btn-color-secondary ml-auto details-btn'><i class='fa fa-edit'></i><?php _e("EDIT"); ?></button>
        <button type='submit' class='btn btn-custom btn-color-secondary ml-auto submit-btn' name='editUser'><i class='fa fa-save'></i><?php _e("SAVE"); ?></button>
      </div>
      <div class='form-row'>
        <div class='col-12  form-group '>
          <label> <?php _e("NAME"); ?> </label>
          <input type='text' name='cabinet_name' class='form-control' value='<?php echo $cabinet->cabinet_name ?>'>
        </div>
      </div>
    </form>
  </div>
</div>
<div class="col-12 col-sm-12 col-md-8 offset-md-4 col-lg-8 offset-lg-4">
  <div class="card-box details-data">
    <form class="form-edit" method="POST" action="<?php Url::link('admin/cabinets/'.$cabinet->cabinet_id) ?>">
      <?php Form::method("PATCH"); ?>
      <div class='d-flex w-100 mb-3'>
        <h3 class='mb-0'>
          <?php _e("DESCRIPTION"); ?>
        </h3>
        <button type='button' class='btn btn-custom btn-color-secondary ml-auto details-btn'><i class='fa fa-edit'></i><?php _e("EDIT"); ?></button>
        <button type='submit' class='btn btn-custom btn-color-secondary ml-auto submit-btn' name='editUser'><i class='fa fa-save'></i><?php _e("SAVE"); ?></button>
      </div>
      <div class='col-12 form-group'>
        <label><?php _e("DESCRIPTION"); ?></label>
        <textarea class='form-control' name='meta_description' rows='3'><?php __meta('meta_description'); ?></textarea>
      </div>
    </form>
  </div>
</div>

0 个答案:

没有答案