Question

所以我有两个问题：

我在引导程序代码中添加了搜索栏，并且希望它像GitHub一样扩展，但是它旁边的文本不能同时扩展。
当出现下拉列表而不是导航栏时，过渡仍然有效，我不确定如何防止过渡。

#searchbar-top-nav:focus {
  width: 450px;
  -webkit-transition: width 0.5s ease-in-out;
  -moz-transition:width 0.5s ease-in-out;
  -o-transition: width 0.5s ease-in-out;
  transition: width 0.5s ease-in-out;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


    <div class="mb-1 shadow-sm">
      <nav class="navbar navbar-expand-md navbar-light bg-light">
        <button class="navbar-toggler navbar-toggler-right" 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>
        <a class="navbar-brand" href="/">BRAND</a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul id="navbar-collapse-ul" class="navbar-nav mr-auto">
            <li class="nav-item active-search-blue">
              <input id="searchbar-top-nav" class="form-control" type="text" placeholder="Search" aria-label="Search">
            </li>

            <li class="nav-item">

              <a id="sign-up-link" class="nav-link" href="/accounts/signup/">Sign Up</a>
            </li>
            <li class="nav-item">

              <a id="log-in-link" class="nav-link" href="/accounts/login/?next=/">Sign In</a>
            </li>

          </ul>
        </div>
      </nav>
    </div>

    <script src="http://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

我尝试了一些像这样的CSS选择器：

#searchbar-top-nav:not(.collapsed):focus {
  width: 100%;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}

https://jsfiddle.net/acwpython/gd8t04nh/ 任何帮助都会很棒！

Answer 1

首先将边距添加到搜索栏以正确对齐，将引导程序类#file Makefile include ${MY_RUN_DIR}/common.mk run: # do something, such as @echo my version is $$MY_VERSION添加到搜索栏mt-lg-0 mt-md-2。

li

还添加过渡

<li class="nav-item active-search-blue mt-lg-0 mt-2">

.navbar-collapse{
  transition: 0s ease-in-out !important;
}

#searchbar-top-nav:focus {
  width: 450px;
  -webkit-transition: width 0.5s ease-in-out;
  -moz-transition:width 0.5s ease-in-out;
  -o-transition: width 0.5s ease-in-out;
  transition: width 0.5s ease-in-out;
  float: left;
}
.navbar-collapse{
  transition: 0s ease-in-out !important;
}

Answer 2

简单，只需添加最小宽度：100％；到您的.form-control类，并就是这样。

.form-control {最小宽度：100％;}

Answer 3

.form-control{min-width:100%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


    <div class="mb-1 shadow-sm">
      <nav class="navbar navbar-expand-md navbar-light bg-light">
        <button class="navbar-toggler navbar-toggler-right" 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>
        <a class="navbar-brand" href="/">BRAND</a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul id="navbar-collapse-ul" class="navbar-nav mr-auto">
            <li class="nav-item active-search-blue">
              <input id="searchbar-top-nav" class="form-control" type="text" placeholder="Search" aria-label="Search">
            </li>

            <li class="nav-item">

              <a id="sign-up-link" class="nav-link" href="/accounts/signup/">Sign Up</a>
            </li>
            <li class="nav-item">

              <a id="log-in-link" class="nav-link" href="/accounts/login/?next=/">Sign In</a>
            </li>

          </ul>
        </div>
      </nav>
    </div>

    <script src="http://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

导航栏中带有引导的Bootstrap搜索栏

3 个答案: