如何设置日期时间输入字段的样式

Question

在这个代码笔中，我使用的是日期时间输入类型。尝试对其进行样式设置，使其与左侧和右侧的输入字段具有相同的高度和水平。我试过线条高度和高度，但这些似乎不起作用。设置日期时间类型输入字段高度样式的正确方法是什么？非常感谢。

<div class="container">
<div class="row">
<div class="form-group col-4">
<label>Name </label>
<div>
<input type="text" class="form-control input-lg">
</div>
</div>

<div class="form-group col-4">
<label>Date Time</label>
<div>
<input type="datetime-local" id="datetime" name="datetime">
</div>
</div>
<div class="form-group col-4">
<label>Test</label>
<div>
<input type="text" class="form-control input-lg" style="padding: 1em;">
</div>
</div>
</div>
</div>

Answer 1

行高正在工作，它将向上和向下推动输入框的边缘

这样添加：

#datetime {
/*   height: 1rem; */
line-height:33px;
} 

或者添加填充(我认为这是正确的方法(：

#datetime {
padding: 4px; /* more or less */
} 

请参阅codepen：https://codepen.io/ppwater/pen/rNLLzqX

Answer 2

将输入设置为高度40px；看看它看起来怎么样

Answer 3

#datetime {
height: 38px;
}

也使用自举网格系统