Bootstrap日期时间选择器中的CSS问题

时间:2017-02-10 06:04:18

标签: html css twitter-bootstrap bootstrap-datetimepicker

我正在尝试使用bootstrap日期时间选择器供用户选择日期,但它让我很难过。

enter image description here

当我选择一个月时,布局看起来不正确。

enter image description here

更新

 <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;

}

我事先感谢你的帮助!

1 个答案:

答案 0 :(得分:1)

发现问题。

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

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

现在它正在运作。感谢您的帮助。