具有所需宽度和集中式的Bootstrap导航栏 [英] Bootstrap navbar with desired width and centralized

问题描述

我正在使用Bootstrap 4，并希望在笔记本电脑上使用时，在导航栏中将内联窗体设置为所需的宽度，并在使用移动设备时扩展到屏幕上.

I am using Bootstrap 4 and would like to make the inline form in navbar to desired width when using on laptopn and extend to screen when using mobile devices.

它在手机中的显示方式:

How it appears in my mobile :

我的HTML代码是

<nav class="navbar navbar-expand-lg fixed-top navbar-transparent " color-on-scroll="300" style="text-transform: capitalize;">
  <div class="d-flex flex-grow-1">
    <a href="/" class="navbar-brand">AutoGram</a>

    <form class="form-inline" action="/search">

      <div class="input-group mb-10 ">
        <input type="text" class="form-control from-control-sm"  id="q" name="q" placeholder="Enter Brand,Model,Variant for search" >
        <div class="input-group-append">
          <span class="input-group-text" style="color:whitesmoke; background-color: black;" id="SearchButton">Search</span>
        </div>
      </div>
    </form>
  </div>
  <button class="navbar-toggler order-0" type="button" data-toggle="collapse" data-target="#navbar7">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse flex-shrink-1 flex-grow-0 order-last" id="navbar7">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

我想增加输入框的宽度并将其放置在笔记本电脑视图的中央 在移动视图中，我希望输入组扩展到切换栏.

I would like to increase the width of the input box and position it centrally in laptop-view and in mobile-view , I would like the input group to extend till the toggle bar.

推荐答案

您可以添加此CSS

form {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 992px) {
  form {
    width: 100%;
  }
}

form div.input-group {
  width: 100% !important;
}

它将增加小屏幕上输入的大小，以占据所有剩余空间.在笔记本电脑上，我给了它width: auto，但您可以将其更改为所需的任何内容.

It will increase the size of input on small screens to occupy all remaining space. And on the laptop I gave it width: auto but you can change this to anything you want.

此外，我给了输入组类width: 100%以匹配form

Also, I gave input-group class width: 100% to match the size of form

希望这会有所帮助.如果没有回来，我们可以一起解决:)

Hope this helps. If it doesn't come back so we can work it out together :)

这篇关于具有所需宽度和集中式的Bootstrap导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！