如何改变bootstrap datepicker的方向

时间:2013-08-19 05:58:21

标签: twitter-bootstrap datepicker

所以我必须在300 X 250的非常短的位置对日期进行约会。日期有两个输入字段。我希望有一个正常方向的日期选择器,而另一个应该指向文本字段的右侧。

所以我想在第一个文本字段中使用这个:

enter image description here

这是第二个:

enter image description here

1 个答案:

答案 0 :(得分:3)

我认为在bootstrap中没有直接选项,但这可以通过 CSS hack 来完成。

覆盖现有的:before:after伪元素。

.datepicker:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: -7px;
left: 190px;  // I made a change here 
}

.datepicker:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
top: -6px;
left: 191px;  // I made a change here 
}

选中此JSFiddle