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

Question

我是新手。

第一个问题

我需要在引导程序中的列之间留出更大的空隙，但是问题是，我不明白。文档是完美的，但对我而言不是：（

我尝试将col中的数字更改为等于12，但没有变化 我注意到它只是改变了手机的分辨率。

台式机

移动

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>

第二个问题

我需要拉伸form-control，在计算机上还可以，但是我只想在平板电脑和移动分辨率上拉伸它。

台式机

HTML

<div class="container" style="margin-top: 20px;">
    <div class="row text-center">      
        <div class="col-md-3 offset-md-4">   
            <div class="form-group">
                <label for="czakazky">Číslo zákazky</label>
                <input type="text" class="form-control" name="czakazky" placeholder="Číslo zákazky">
            </div>
            <div class="form-group">
                <label for="poz">Pozícia</label>
                <input type="text" class="form-control" name="poz" id="poz" placeholder="Pozícia">
            </div>
            <div class="form-group">
                <label for="pcislo">Poradové číslo dielu</label>
                <input type="text" class="form-control" name="pcislo" placeholder="Poradové číslo dielu">
            </div>
        </div>
    </div>
</div>

我无法添加完整的代码。抱歉

提前谢谢！

Answer 1

第一个解决方案

  

我需要在引导程序中的列之间留出更大的空隙，但是问题是，我不明白。

只需从代码中删除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>

第二个解决方案

  

我需要扩展表单控制，在计算机上还可以，但是我只想在平板电脑和移动分辨率上进行扩展。

如果仅在992px（平板电脑，移动分辨率）以下应用col，则可以使用col-*到col-md-*

我以较小的分辨率添加了col-6（第6列），对于较大的分辨率，我添加了col-lg-12（全宽12列），并且为center我添加了removed offset-md-4 并添加了flexbox CSS d-flex flex-column align-items-center

<div class="container" style="margin-top: 20px;">
    <div class="row text-center d-flex flex-column align-items-center">      
        <div class="col-6 col-lg-12">   
            <div class="form-group">
                <label for="czakazky">Číslo zákazky</label>
                <input type="text" class="form-control" name="czakazky" placeholder="Číslo zákazky">
            </div>
            <div class="form-group">
                <label for="poz">Pozícia</label>
                <input type="text" class="form-control" name="poz" id="poz" placeholder="Pozícia">
            </div>
            <div class="form-group">
                <label for="pcislo">Poradové číslo dielu</label>
                <input type="text" class="form-control" name="pcislo" placeholder="Poradové číslo dielu">
            </div>
        </div>
    </div>
</div>

实时片段

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="container" style="margin-top: 20px;">
  <div class="row text-center d-flex flex-column align-items-center">      
    <div class="col-6 col-lg-12">   
      <div class="form-group">
        <label for="czakazky">Číslo zákazky</label>
        <input type="text" class="form-control" name="czakazky" placeholder="Číslo zákazky">
      </div>
      <div class="form-group">
        <label for="poz">Pozícia</label>
        <input type="text" class="form-control" name="poz" id="poz" placeholder="Pozícia">
      </div>
      <div class="form-group">
        <label for="pcislo">Poradové číslo dielu</label>
        <input type="text" class="form-control" name="pcislo" placeholder="Poradové číslo dielu">
      </div>
    </div>
  </div>
</div>