Question

我有这个Bootstrap4导航栏。有一个品牌和几个链接（导航项目）。在下面，我有一个搜索表，显示在右侧。我如何将它放在导航中心。它不应该居中占据剩余空间，而应该完全居中在整个导航栏中。我应该添加任何类或样式来使其工作吗？另外，我想在表单当前所在的右侧添加链接。

我尝试弄乱margin类，在表单中添加“ mx-auto”，将表单放置在ul列表中，并使用“ display：inline-block”

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

如前所述，内联窗体在右侧居中，但应在中间居中。这是一些背景图片。（另外，我使用的是Bootstrap Material Design，这就是为什么它看起来有点不同的原因）

当前： Current result 我想要的是： What I want/Expected

Answer 1

     <form class="form-inline my-2 my-lg-0" style="margin: 0 auto;">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>

如果这样不起作用，则创建一个新类，并将其粘贴到class form-inline my-2 my-lg-0 mycenterformclass类旁边

编辑=>

  <div style="margin: 0 auto;">  <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form></div>
</div>

您也可以

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent" style="float:left;">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
  <div style="float:right; width:50%">  <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form></div>
</div>

Answer 2

创建父div块并为其添加宽度和边距

```{r selectInput for iris database}

selectInput("x_axis", "X-Axis",
            choices = names(iris))
selectInput(inputId = "y_axis", label = "Y-Axis",
            choices = names(iris))

renderPlot({
  ggplot(iris, aes(input$x_axis, input$y_axis, colour = Species)) +
      geom_point()
})

如何在导航栏中居中放置表单？

2 个答案: