2017-02-10 29 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; 
} 

现在工作。感谢所有的帮助。