制作灵活的搜索栏

Question

我的标题有点问题我想要这个：

搜索栏变得灵活，这意味着如果橙色按钮文字变大，搜索栏必须调整大小，以便按钮不会下降谁知道如何做到这一点你可以分享你的经验，抱歉形成我的英语

HTML

    <div class="navigation-holder">
        <div id="top-navbar">
            <div class="container">
                <div class="col-lg-9 no-padding">
                    <input type="text" name="" class="top-navbar-search" placeholder="Поиск по предметам или по именам">
                </div>
                <div class="col-lg-3 no-padding">
                    <div class="top-navbar-links">
                    @if(Auth::check())
                        <a href="{{ action('UserController@getIndex') }}" class="top-navbar-links-login">{{ Auth::user()->first_name }}</a>
                        <a href="{{ action('UserController@getLogout') }}" class="top-navbar-links-login">Выйти</a>
                    @else
                        <a href="{{ action('UserController@getLogin') }}" class="top-navbar-links-login">aefaefaefaefaefaefaefe</a>
                        <a href="{{ action('UserController@getRegister') }}" class="top-navbar-links-register">Зарегистрироваться</a>
                    @endif
                    </div>
                </div>
            </div>
        </div>
        <nav id="navbar">
            <div class="container">
                <a href="{{ action('PageController@getIndex') }}" class="navbar-brand"></a>

                <button class="navbar-toggle">
                    <span></span>
                </button>

                <ul class="navbar-nav">
                    <li><a href="">Обратная связь</a></li>
                    <li><a href="{{ action('PageController@getAbout') }}">О проекте</a></li>

                    <li><a href="">Рус</a></li>
                    <li><a href="">Узб</a></li>
                    <li><a href="">Eng</a></li> 
                </ul> 
            </div>
        </nav>
    </div>






#top-navbar{
    min-height: 50px;
    width: 100%;
    background-color: @brand-blue;

    .top-navbar-search{
        width: 100%;
        min-height: 50px;
        padding: 0 70px 0 20px;
        color: #fff;
        background: #339dd1 url(../img/search.svg) no-repeat 97% 48%;
        background-size: 22px;
        font-size: 18px;
        font-family: 'Light';

        .placeholder({
            color: #fff;
        });
    }

    .top-navbar-links{
        width: 100%;
        text-align: center;
        display: table-cell;
        a{
            padding: 0 10px;
            font-family: 'Light';
            color: #fff;
            display: inline-block;
            line-height: 50px;
            font-size: 18px;
            min-height: 50px;
            float: left;
            background-color: @brand-yellow;
            .transition(background, 200ms, linear);

            &:hover{
                background-color: #d17a45;
            }

        }
    }
}



#navbar{
    background-color: #fff;
    min-height: 70px;
    width: 100%;
    border-bottom: 1px solid #cbcbcb;

    .navbar-brand{
        width: 160px;
        height: 41px;
        background: url(../img/brand.svg) no-repeat center;
        background-size: 100%;
        display: inline-block;
        margin-top: 16px;
    }

    .navbar-toggle{
        width: 70px;
        height: 70px;
        float: right;
        position: relative;
        display: none;
        span{
            display: block;
            width: 35px;
            margin: 0 auto;
            height: 4px;
            background-color: #393939;
            .transition(all, 200ms, linear);

            &:before{
                content: '';
                top: 23px;
                .bar;
            }
            &:after{
                content: '';
                bottom: 23px;
                .bar;
            }
        }

        &:hover{
            span{
                background-color: @brand-blue;
                &:before, &:after{
                    background-color: @brand-blue;
                }
            }
        }
    }

    .navbar-nav{
        float: right;
        display: inline-block;
        line-height: 70px;

        li{
            display: inline-block;
            &:first-child{
                margin-right: 20px;
            }
            &:nth-child(3){
                margin-left: 30px;
            }
        }

        a{
            display: block;
            line-height: 70px;
            color: @brand-black;
            .transition(color, 100ms, linear);

            &:hover{
                color: @brand-blue;
            }
        }
    }
}

Answer 1

使用bootstrap网格，例如：

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-2" style="background-color:blue;"></div>
    <div class="col-sm-7" style="background-color:lavenderblush;">Search</div>
    <div class="col-sm-1" style="background-color:lavenderblush;">Button</div>
    <div class="col-sm-2" style="background-color:blue;"></div>
  </div>
</div>

</body>
</html>