2017-02-10 30 views
1

我試圖使用引導日期時間選擇器爲用戶選擇日期,但它給我一個很難。Bootstrap日期選擇器中的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。請檢查**填充**值。這可能會解決你的問題。我之前有這個問題。請檢查**填充**。 –

+0

粘貼您的代碼 –

回答

1

發現問題。

我在我自己的css文件中更改了.table。

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

現在工作。感謝所有的幫助。