Php 将id添加到div，现在表单字段不是全宽

我有一个表单，根据前面的问题动态显示三个后续字段中的一个。这是选择器问题和动态显示字段：

 <!-- Selector -->
        <div id="selector" class="form-group">
          <label class="col-md-12 control-label" for="selector">Booking Type</label>
          <div class="col-md-12">
                <div class="radio">
            <label for="selector">
              <input name="selector" id="selector" value="Customer/Jobsite" onclick="show1();" type="radio">Customer/Jobsite</label>
            </div>
                <div class="radio">
            <label for="selector">
              <input name="selector" id="selector" value="Absence" onclick="show2();" type="radio">Absence</label>
            </div>
                <div class="radio">
            <label for="selector">
              <input name="selector" id="selector" value="Custom" onclick="show3();" type="radio">Custom</label>
            </div>
          </div>
        </div>

        <!-- Result Jobsite -->
        <div id="ResultJobsite" class="form-group" style="display:none;">
            <div class="form-row">
          <label class="col-md-12 control-label" for="Result">Customer/Jobsite</label>
          <div class="col-md-12" class="form-group">
            <select id="ResultJobsite" name="ResultJobsite" class="form-control select2_field">
                <option value=""></option>
            @foreach (App\Models\Customer::all()->sortby('Customer') as $row)
                <option <?php if ("{{ $row->Customer }}" == "{{ $entry->Result }}") { ?> selected="selected" <?php } ?> value="{{ $row->Customer }}">{{ $row->Customer }}</option>
            @endforeach
            </select>
          </div>
        </div>

本质上，将id=“ResultJobsite”添加到字段允许它根据需要动态显示/隐藏，但它不再像其他字段那样显示字段的全宽。删除id=“ResultJobsite”会将其恢复为全宽

---

这里发生了什么？

将类表单控件添加到这些输入文件以获得全宽。

首先，您在

和

中提供了相同的id。请更正它。如果你打开开发者控制台（通常是F12），通过DOM找到你想要的元素并检查计算属性，你可以检查为什么它不同。

 function show1(){
          document.getElementById('ResultJobsite').style.display ='block';
          document.getElementById('ResultAbsence').style.display ='none';
          document.getElementById('ResultLongform').style.display ='none';
          document.getElementById('ResultShortform').style.display ='none';
        }
        function show2(){
          document.getElementById('ResultJobsite').style.display ='none';
          document.getElementById('ResultAbsence').style.display ='block';
          document.getElementById('ResultLongform').style.display ='none';
          document.getElementById('ResultShortform').style.display ='none';
        }
        function show3(){
          document.getElementById('ResultJobsite').style.display ='none';
          document.getElementById('ResultAbsence').style.display ='none';
          document.getElementById('ResultLongform').style.display ='block';
          document.getElementById('ResultShortform').style.display ='block';
        }