Html 带引导的固定导航栏中的固定搜索自动完成框存在问题

我有这个问题，我想我的自动完成框有整个搜索框相同的宽度。使用Bootstrap的col-xs-11类执行类似操作：

如果我将位置设置为“相对”，如下所示（所有位置都保持在导航栏内）：

但当我将“自动完成”框的位置设置为“固定”时，如下所示（宽度发生变化）：

这是我的密码：

<div id="buscqueda" class="navbar-search smallsearch col-sm-8 col-xs-11">
                    <div class="row"> 
                        <input class="navbar-input col-xs-10" type="" placeholder="Buscar productos" name=""> <button class="navbar-button col-xs-1"> <svg width="15px" height="15px">
                                <path d="M11.618 9.897l4.224 4.212c.092.09.1.23.02.312l-1.464 1.46c-.08.08-.222.072-.314-.02L9.868 11.66M6.486 10.9c-2.42 0-4.38-1.955-4.38-4.367 0-2.413 1.96-4.37 4.38-4.37s4.38 1.957 4.38 4.37c0 2.412-1.96 4.368-4.38 4.368m0-10.834C2.904.066 0 2.96 0 6.533 0 10.105 2.904 13 6.486 13s6.487-2.895 6.487-6.467c0-3.572-2.905-6.467-6.487-6.467 "></path>
                            </svg> </button> 
                        </div>
                        <div class="autocom-box row">
                            <li class="col-xs-11">producto 1</li>
                            <li class="col-xs-11">producto 2</li>
                            <li class="col-xs-11">producto 3</li>
                            <li class="col-xs-11">producto 4</li>
                            
                       </div>
                    
                </div>

---

你能检查一下下面的代码吗？希望它对你有用。我们从

输入

、

按钮

和

li

标记中删除了不必要的引导类。然后我们给出

位置：绝对和<代码>宽度：100%.autocom框

中编码>而不是固定位置

主要{
填充：15px；
背景：#000；
}
.导航栏搜索{
位置：相对位置；
填充：0px 15px；
}
.导航栏输入{
宽度：计算（100%-80px）；
}
.导航栏按钮{
宽度：75px；
}
自动通信箱{
背景：#fff；
}
李先生{
背景色：白色；
颜色：黑色；
填充：10px 20px；
}
.自动通信盒{
位置：绝对位置；
z指数：9999；
边框顶部：1件纯黑；
盒影：4px 4px 8px-1px黑色；
宽度：100%；
}

产品1
产品2
产品3
产品4

您能检查一下下面的代码吗？希望它对你有用。我们从

输入

、

按钮

和

li

标记中删除了不必要的引导类。然后我们给出

位置：绝对和<代码>宽度：100%.autocom框

中编码>而不是固定位置

主要{
填充：15px；
背景：#000；
}
.导航栏搜索{
位置：相对位置；
填充：0px 15px；
}
.导航栏输入{
宽度：计算（100%-80px）；
}
.导航栏按钮{
宽度：75px；
}
自动通信箱{
背景：#fff；
}
李先生{
背景色：白色；
颜色：黑色；
填充：10px 20px；
}
.自动通信盒{
位置：绝对位置；
z指数：9999；
边框顶部：1件纯黑；
盒影：4px 4px 8px-1px黑色；
宽度：100%；
}

产品1
产品2
产品3
产品4

在

bootstrap-4

中，不支持

xs

列。在

bootstrap-4

中尝试使用

col-

或

col-sm-

，不支持

xs

列。尝试使用

col-

或

col-sm-

    .autocom-box li{
  background-color: white;
  color: black;
  padding: 10px 20px;
  
}

.autocom-box{
  position: fixed;
  z-index: 9999;
  border-top: 1px solid black;
  box-shadow: 4px 4px 8px -1px black;
  
  
}