Bootstrap 4 网格系统中的bootstrap4间距问题

我是新手

第一个问题 我需要在bootstrap中增加列之间的间距，但问题是，我不明白。文件是完美的，但对我来说不是：(

我试图将col中的数字改为等于12，但没有改变 我注意到它只在手机分辨率上发生了变化

<div style="margin-top: 20px;">
    <div class="row border border-primary">
        <div class="col-md-3 border border-secondary">
            <a href="<?= base_url(); ?>meradla/add" class="btn btn-primary">Pridať</a>
        </div>
        <div class="col-md-5 border border-success"></div>
        <div class="col-md-4 border border-danger">
            <?= form_open_multipart('meradla/search', ['class' => 'form-inline']); ?>
            <input class="form-control" type="search" placeholder="Priezvisko" name="search" aria-label="Search" style="margin-right:10px">
            <?= form_submit(['class' => 'btn btn-primary'], 'Hľadať'); ?>
            <?= form_close();?>
        </div>
    </div>
</div>

桌面

移动

HTML

<div class="container" style="margin-top: 20px;">
   <div class="row border border-primary">
      <div class="col-md-3 border border-secondary">
         <a href="<?= base_url(); ?>meradla/add" class="btn btn-primary">Pridať</a>
      </div>
   </div>
   <div class="col-md-5 border border-success"></div>
   <div class="col-md-4 border border-danger">
      <?= form_open_multipart('meradla/search', ['class' => 'form-inline']); ?>
      <input class="form-control" type="search" placeholder="Priezvisko" name="search" aria-label="Search" style="margin-right:10px">
      <?= form_submit(['class' => 'btn btn-primary'], 'Hľadať'); ?>
      <?= form_close();?>
   </div>
</div>

我无法添加整个代码。很抱歉

提前感谢！！

第一个解决方案 我需要在bootstrap中增加列之间的间距，但问题是，我不明白

只需从代码中删除

container

，

container

设置内容的边距，以处理版面的响应行为，并以小分辨率删除

container

<div style="margin-top: 20px;">
    <div class="row border border-primary">
        <div class="col-md-3 border border-secondary">
            <a href="<?= base_url(); ?>meradla/add" class="btn btn-primary">Pridať</a>
        </div>
        <div class="col-md-5 border border-success"></div>
        <div class="col-md-4 border border-danger">
            <?= form_open_multipart('meradla/search', ['class' => 'form-inline']); ?>
            <input class="form-control" type="search" placeholder="Priezvisko" name="search" aria-label="Search" style="margin-right:10px">
            <?= form_submit(['class' => 'btn btn-primary'], 'Hľadať'); ?>
            <?= form_close();?>
        </div>
    </div>
</div>

因此，每当您在项目中更改代码时，它只会以较小的分辨率应用

<div style="margin-top: 20px;">
    <div class="row border border-primary">
        <div class="col-md-3 border border-secondary">
            <a href="<?= base_url(); ?>meradla/add" class="btn btn-primary">Pridať</a>
        </div>
        <div class="col-md-5 border border-success"></div>
        <div class="col-md-4 border border-danger">
            <?= form_open_multipart('meradla/search', ['class' => 'form-inline']); ?>
            <input class="form-control" type="search" placeholder="Priezvisko" name="search" aria-label="Search" style="margin-right:10px">
            <?= form_submit(['class' => 'btn btn-primary'], 'Hľadať'); ?>
            <?= form_close();?>
        </div>
    </div>
</div>

实时片段

Čslo zákazky
波西西亚
波拉多夫·西斯洛·迪鲁
< /代码>不要忘记考虑投票，并选择AsWe为您的最佳答案，通过点击绿色箭头！