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

Question

我有一个搜索输入。我在 Bootstrap 4 中使用了 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 类中有 width:100%。因此，它不会按预期工作。