vuejs DatePicker изменить настройки моего шаблона

Question

Я пытаюсь вставить vuejs datepicker в мой шаблон vue, но когда я добавляю компонент, он переставляет мой шаблон, перемещаясь справа налево. затрагивает другие html элементы

это изображение моего шаблона перед добавлением

Это мой шаблон ДО добавления указателя даты

это мой шаблон ПОСЛЕ добавления vuejs -датчик

каждый тег имеет право на Осталось включить мои ссылки и поменять их иконку

ниже мой код

 <div class="row pb-3 pt-5 bg-light">
      <div class="col-md-8">
            <div class="form-group">
                <label for="distributor">Select Distributor</label>
                   <select class="form-control" id="distributor">
                      <option>M OSEI AKOTO ENT(NESTLE)</option>
                   </select>
            </div>

      </div>
      <div class="col-md-4">
          <div class="form-group">
             <label for="stock_date">Date</label>
                 **<datepicker></datepicker>**

          </div>
          <div class="form-group">
               <label for="stock_invoice">Stock Number</label>
               <input type="text" class="form-control" name="stock_invoice_number" placeholder="stock invoice number">
          </div>
     </div>
 </div>


  <script>

    import moment from 'moment';
    import Datepicker from 'vuejs-datepicker';

    export default {
      name:'AddStocks',
      components: {
          Datepicker
      }
  </script>

Каждая вещь возвращается к нормальной, когда я удаляю компонент Datepicker.

изображение стиля

После проверки sytle я понимаю, что компонент datepicker был прикреплен из моего элемента root div вниз к каждому тег под i t

Answer 1

проверьте свой стиль, проверив, чтобы вы поняли его неправильно, мне нужны изображения из осмотра, чтобы я мог помочь вам