表格内的分组部分

Question

我有这个表格，我想把表格分成三个不同的部分。表单的其中一个部分是您在下图中红色边框周围看到的部分。我使用了 fieldset 元素来分隔该部分。代码是这样的：

.field_set {
  border-color: black;
  border-style: solid;
  border: 1px #F00 solid;
}

<fieldset class="field_set">
  <div class="form-group m-form__group row">
    <legend> Start </legend>
    <!-- form group 4(adress) -->
    <!-- From address -->
    <div class="col-md-4">
      <input type="text" id="ac1" class="form-control" name="google-autocomplete" placeholder="<?php echo trans('manage_request_labels.address_input_placeholder_text');?>">
      </input>
    </div>

    <div class="col-md-4">
      <select class="form-control" id="type_of_fuel" name="type_of_fuel_input" style="width: 100%">
        <option value="">
          <?php echo trans('manage_request_labels.select_fuel_text');?>
        </option>
      </select>
    </div>

    <div class="col-md-4">
      <select class="form-control" id="euro_class" name="euro_class_input" style="width: 100%">
        <option value="">
          <?php echo trans('manage_request_labels.select_euroclass_text');?>
        </option>
      </select>
    </div>

    <div class="col-md-4">
      <select class="form-control" id="type_of_vehicle" name="type_of_vehicle_input" style="width: 100%">
        <option value="">
          <?php echo trans('manage_request_labels.select_vehicle_text');?>
        </option>
      </select>
    </div>

    <div class="col-md-4">
      <select class="form-control" id="vehicle_capacity" name="vehicle_capacity" style="width: 100%">
        <option value="">
          <?php echo trans('manage_request_labels.select_vehicle_capacity_text');?>
        </option>
        <option value="0">
          0%
        </option>
        <option value="10">
          10%
        </option>
        <option value="20">
          20%
        </option>
        <option value="30">
          30%
        </option>
        <option value="40">
          40%
        </option>
        <option value="50">
          50%
        </option>
        <option value="60">
          60%
        </option>
        <option value="70">
          70%
        </option>
        <option value="80">
          80%
        </option>
        <option value="90">
          90%
        </option>
        <option value="100">
          100%
        </option>
      </select>
    </div>


  </div>
</fieldset>

• 我的第一个问题是为什么边框会像这样越过图例文本，您如何解决它
• 第二个问题。你如何让边框更圆更光滑
• 最后一个问题。有没有更好的方法通过引导程序或其他方式分隔部分？欢迎任何想法。我尝试使用良好的引导类（https://www.w3schools.com/bootstrap/bootstrap_wells.asp），但由于某种原因它不起作用。当我在下面的代码中将井类添加到与“行”相同的 div 时，什么也没发生

Answer 1

您需要覆盖一些引导程序样式（参见下面的代码）。

但首先，将图例移到 div 之外（它不属于其中）。

要在元素之间获得更多空间，请将它们包装在 form-group 类中

<div class="form-group">
    <input type="text" id="ac" class="form-control" name="google-autocomplete" placeholder="" />
</div>

圆角边框，使用border-radius

border-radius: 4px;

.field_set {
    border: 2px #F00 solid;
    border-radius: 4px;
    margin: .75rem;
    padding: .75rem;
}

legend {
    padding: 4px!important;
    width: unset!important;
}


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<fieldset class="field_set">
    <legend>Start</legend>
    <div class="form-group m-form__group row">
        <!-- form group 4(adress) -->
        <!-- From address -->
        <div class="col-md-4">
            <div class="form-group">
                <input type="text" id="ac1" class="form-control" name="google-autocomplete" placeholder="" />
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <select class="form-control" id="type_of_fuel" name="type_of_fuel_input" style="width: 100%">
                    <option value="">
                    </option>
                </select>
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <select class="form-control" id="euro_class" name="euro_class_input" style="width: 100%">
                    <option value="">
                    </option>
                </select>
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <select class="form-control" id="type_of_vehicle" name="type_of_vehicle_input" style="width: 100%">
                    <option value="">
                    </option>
                </select>
            </div>
        </div>

        <div class="col-md-4">
            <div class="form-group">
                <select class="form-control" id="vehicle_capacity" name="vehicle_capacity" style="width: 100%">
                    <option value=""></option>
                    <option value="0">0%</option>
                    <option value="10">10%</option>
                    <option value="20">20%</option>
                    <option value="30">30%</option>
                    <option value="40">40%</option>
                    <option value="50">50%</option>
                    <option value="60">60%</option>
                    <option value="70">70%</option>
                    <option value="80">80%</option>
                    <option value="90">90%</option>
                    <option value="100">100%</option>
                </select>
            </div>
        </div>
    </div>
</fieldset>