Question

我目前正在努力将我的搜索栏集中在我的导航栏中。我尝试了许多不同的内容，例如import java.io.*; import java.math.*; class test { public static void main(String[] args){ String[] s= {"1","0.12",".12"}; int n = 3; for(int i=0;i<n;i++){ BigDecimal d=new BigDecimal(s[i]); for (int j =i+1; j<n; j++){ BigDecimal a=new BigDecimal(s[j]); if(d.compareTo(a)==-1){ String m = s[j]; s[j]=s[i]; s[i]=m; } } } //Output : for(int i=0;i<n;i++) System.out.println(s[i]); } }和mr-atuo或ml-auto，但我无法让元素移动。我不想使用单个像素，因为它在移动设备上看起来很糟糕。以下是酒吧需要的位置和当前位置的小型演示：https://imgur.com/a/bHXJD

以下是导航栏的代码：

＆＃13;

mx-auto

＆＃13;

提前致谢！

Answer 1

您必须稍微更改HTML结构。将表单移出UL

HTML：

.form-inline{
  width: 100%;
  display: flex;
  justify-content: center;
}

.form-inline #search{
  width: 50%;
}

CSS：

moc

JsFiddle

Answer 2

一种解决方案是为您的.form-inline分配最小宽度，并让.search-input与flex-box一起增长：

.form-inline {
  min-width: 500px;
}
.search-input {
  flex-grow: 3;
}

codepen

Bootstrap 4 - Navbar搜索栏中心

2 个答案: