vuejs datepicker 重新排列我的模板設置

Question

我嘗試將 vuejs datepicker 插入到我的 vue 模板中，但是當我添加組件時，它通過從右向左移動來重新排列我的模板。 影響其他 html 元素

這是添加之前我的模板的圖片

這是我添加日期選擇器之前的模板

這是我添加 vuejs-datepicker 后的模板

每個標簽從右到左都有，包括我的鏈接和它的圖標交換

下面是我的代碼

 <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 組件時，一切都會恢復正常。

風格形象

檢查樣式后，我意識到日期選擇器組件已從我的根磁貼 div 附加到它下面的每個標簽

Answer 1

通過檢查檢查你的風格，所以你會弄錯，我需要檢查的圖像，所以我可以幫助你