左右 CSS 属性无法与输入组 bootstrap 4 一起正常工作

Question

我有一个搜索输入。我在Bootstrap4中使用了input-group。现在，我想将此元素定位为具有 left 和 right 属性的绝对定位。奇怪的是，这些属性中只有一个会起作用，但不会同时起作用。任何想法为什么会发生这种情况和解决方案？

这是一个 jsfiddle：

https://jsfiddle.net/Maged_Saeed/hse2kr4c/

提前致谢。

Answer 1

JsFiddle

.search-group {
    position: absolute !important;
    left: 50px !important;
    bottom: 5px;
    width: calc(100% - 100px)
}

在您的 css 中添加 width: calc(100% - 100px)。 right:50px 也在工作。但是，在你的 .input-group class 中有 width:100%。所以，它不会按预期工作。