2017-02-10 9 views
1

私は、ユーザーが日付を選択するためにブートストラップ日時ピッカーを使用しようとしていますが、それは苦労しています。ブートストラップの日付選択ツールのCSSの問題

enter image description here

私が月を選択すると、レイアウトが正しく表示されません。

enter image description here

UPDATE

<div class="col-md-10 formMargin" style="text-align: right; " role="search"> 
     <form> 
     <input class="searchPlace" id="city" name="city" autocomplete="off" > 
      <span class="searchPrice"> 
       <div class="form-control form-background-color searchPrice2" style=""> <span >Price</span> </div> 
       <div class="selectBox"> 
        <select class="form-control custom-dropdownHome"> 
         <option label=" "></option> 
         <option>Free</option> 
        </select> 
       </div> 
      </span> 

     <div class="input-group date" id="eventDatePicker_0" style="height:50px; height: 50px;padding-right: 0px; opacity: 1; width: 14%; vertical-align: bottom; display: inline-block; "> 

     <input style="width: 60%; padding: 0px; padding-left: 10px; padding-top: 5px;background:transparent;border:none;box-shadow: none; " placeholder="Date" class="form-control" type="text" > 
     <span class=" input-group-addon" style="background:transparent;border:none;box-shadow:none;padding-top: 10px; padding-right: 0px;"> 
       <span class="glyphicon glyphicon-calendar"></span> 
     </span> 

     </div> 
     </form> 
    </div> 

CSSコード:

.formMargin form{ 
    margin-bottom: 0px; 
    display: inline-block; 
    width: 100%; 
} 
.searchPlace{ 

    color: black; 
    height: 50px; 
    font-size: 17px; 
    background: rgba(255,255,255,1); 
    padding-left: 1%; 
    border: none; 
    vertical-align: bottom; 
    width: 15%; 
} 
.searchPrice{ 
    display: inline-block; vertical-align: bottom;width: 13%; 
} 
.selectBox{ 
    border:0px;height:50px;width:70%; background:white;box-shadow: none;display:inline-block;float:right; 
} 
.date{ 
    font-size:17px; 
    //float:right; 
    opacity:0.8; 
    padding:5px; 

} 

私はあなたの助けに前もって感謝します!

+0

は多少**パディング**問題かもしれません。 –

+1

あなたの他のCSSスクリプトがdatepickerのCSSに影響していると思います。 **詰め物**の値を確認してください。これはurの問題を解決するかもしれません。私は前にこの問題があります。 **パディング**を確認してください。 –

+0

あなたのコードを貼り付けてください –

答えて

1

問題が見つかりました。

自分のCSSファイルで.tableを変更しました。

table { 
    border-spacing: 20px; 
    border-collapse: separate; 
} 

これで動作します。すべての助けに感謝します。

関連する問題