ブートストラップdatetimepickerがタブ内容ボックス内で切断されました

Question

私はeonasdan-bootstrap-datetimepickerを使用しています。

1. datetimepickerは、ブートストラップのタブコンテンツコントロール内にあり、上部の余白で切り取られています。 BRタグ
   
   

2. BRタグの層なしの
   
   スクリーンショットは、このように自分自身を明らかにするために、フルのDateTimePickerを可能にパディングを追加します。
   
   BRタグのスクリーンショットは、ここ
   
   

が含まフォームグループ以下BRタグなし形式のマークアップである：ここ

<form class="form-horizontal mt-sm" action='' method="POST"> 
    <fieldset>  
     <div class="form-group"> 
      <label for="expiration-date" class="control-label col-md-3">Expiration Date</label> 
      <div class="col-md-8"> 
       <div class="col-md-10"><input type="text" id="expiration-date" class="form-control"></div> 
      </div> 
     </div> 
    </fieldset> 
</form> 

スクリプトは、次のとおり

<script src="/lib/bootstrap-select/dist/js/bootstrap-select.min.js"></script> 
<script src="/lib/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script> 
<script src="/lib/select2/select2.min.js"></script> 
<script src="/bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script> 
<link rel="stylesheet" href="/bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css" /> 

Answer 1

問題は、z-indexのタブが日付選択ツールのUIよりも高くなっています。したがって、これを解決するには、日付選択ツールのUIのZ-インデックスを増やす必要があります。

.datepicker { 
    z-index: 1151; 
} 

あなたが必要.datepicker要素についてより具体的にセレクタを変更してください。また、このスタイルが優先されることを確認してください。私の場合はz-index: 1151 !important;を使用しなければなりませんでしたが、!importantなしでこれを行うことができない限り、私はそれをお勧めしません。