带有引导程序的固定导航栏中固定搜索自动完成框的问题

Question

我有这个问题，我希望我的自动完成框与整个搜索框的宽度相同。使用 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>

这里是CSS：

    .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;
  
  
}

Answer 1

你能看看下面的代码吗？希望它对你有用。我们从 // on mouse pressed void mousePressed(){ for (int i= 0; i<balls.size(); i++) { // make current ball reusable in this loop Ball ball = balls.get(i); // if ball is hovered if(ball.isHovered){ // add two new balls from the current location balls.add(ball.copy()); balls.add(ball.copy()); // remove ball balls.remove(i); } } } 、input 和 button 标签中删除了不必要的引导类。然后我们在 li 中给出了 position: absolute; 和 width: 100%; 而不是位置固定。

.autocom-box