我正在尝试使用bootstrap日期时间选择器供用户选择日期,但它让我很难过。
当我选择一个月时,布局看起来不正确。
更新
<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文件中更改了.table。
table {
border-spacing: 20px;
border-collapse: separate;
}
现在它正在运作。感谢您的帮助。