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

通过检查检查你的风格，所以你会弄错，我需要检查的图像，所以我可以帮助你