Question

你好我使用bootstrap 3 v3.36有一个项目，导航栏固定顶部和滑块和表单搜索。在滑块区域我想从搜索和3按钮，如2下拉和搜索按钮显示内联。

继承我的代码

<header>
      <!-- NAVBAR-START -->
      <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">brand</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">people <span class="sr-only">(current)</span></a></li>
              <li><a href="#">gallery</a></li>
              <li><a href="#">inspiration</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Jobs oportunity</a></li>
              <li><a href="#">hirring a chief?</a></li>
              <li><a href="#">login|signup</a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
      <!-- NAVBAR-END -->

      <!-- SLIDER-START -->
        <div id="slider">
          <img src="http://placehold.it/350x150">
        </div>
      <!-- SLIDER=END -->
      <!-- search-controller -->
        <div class="position-relative">
          <div class="search-controller">
            <form role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                  Dropdown1
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                  <li><a href="#">Action</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div>
              <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                  Dropdown2
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                  <li><a href="#">Action</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
          </div>
        </div>
        <!-- search-controller END-->

    </header>

CSS

#slider img{
    width: 100%;

}


.search-controller .form-control{
    width: 60%;
    margin: auto;


}
.search-controller{
    position: absolute;
    top: auto;
    bottom: 15px;
    left: 0;
    right: 0;
    z-index: 2000;
}
.position-relative{
    position: relative;
}

但是我的代码输入搜索和其他按钮无法获得aline甚至我使用display:inline-block如何做到这一点？以及如何使其响应即使我最小化移动因为当我最小化我的按钮崩溃突然不能COLAPSE？

或者你可以在这里查看结果 http://codepen.io/vicario/pen/graqPm

感谢

Answer 1

这是你正在寻找的吗？我将表单元素放入.container div，将.dropdown和.search-controller .form-control更改为display:inline-block，并从.search-controller .form-control中删除相对位置。我还将form-inline类添加到表单中：

＆＃13;

#slider img {
    width: 100%;
    /*height: 50%;*/
}

.search-controller .form-control {
    width: 60%;
    display:inline-block;
}

.dropdown{
	display:inline-block;
}

.search-controller {
    position: absolute;
    top: auto;
    bottom: 15px;
    left: 0;
    right: 0;
    z-index: 2000;
}



.position-relative {
    position: relative;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
    <!-- NAVBAR-START -->
    <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">people <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">gallery</a></li>
                    <li><a href="#">inspiration</a></li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Jobs oportunity</a></li>
                    <li><a href="#">hirring a chief?</a></li>
                    <li><a href="#">login|signup</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <!-- NAVBAR-END -->

    <!-- SLIDER-START -->
    <div id="slider">
        <img src="http://placehold.it/350x150">
    </div>
    <!-- SLIDER=END -->
    <!-- search-controller -->
	<div class="container">
	

    <div class="position-relative">
        <div class="search-controller">
            <form role="search" class="inline-form">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
					<div class="dropdown">
						<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
							Dropdown1
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
							<li><a href="#">Action</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
					<div class="dropdown">
						<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
							Dropdown2
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
							<li><a href="#">Action</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#">Separated link</a></li>
						</ul>
					</div>
				</div>
				<button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>
    <!-- search-controller END-->
	</div>
	</header>

＆＃13;

Answer 2

       #slider img{
       width: 100%;

    }


    .search-controller .form-control{
      width: 60%;
      margin: auto;


    }
    .search-controller{
      position: absolute;
       top: auto;
      bottom: 15px;
       left: 0;
       right: 0;
       z-index: 2000;
    }
    .position-relative{
       position: relative;
    }

<!-- language: lang-html -->

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<header>
      <!-- NAVBAR-START -->
      <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">brand</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">people <span class="sr-only">(current)</span></a></li>
              <li><a href="#">gallery</a></li>
              <li><a href="#">inspiration</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">Jobs oportunity</a></li>
              <li><a href="#">hirring a chief?</a></li>
              <li><a href="#">login|signup</a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
      <!-- NAVBAR-END -->

      <!-- SLIDER-START -->
        <div id="slider">
          <img src="http://placehold.it/350x150">
        </div>
      <!-- SLIDER=END -->
      <!-- search-controller -->
        <div class="position-relative">
          <div class="search-controller">
            <form role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <div class="dropdown row"><div class="col-lg-4"></div><div class="col-lg-4">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                  Dropdown1
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                  <li><a href="#">Action</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
                </div><div class="col-lg-4"></div></div>
              <div class="dropdown row"><div class="col-lg-4"></div><div class="col-lg-4">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                  Dropdown2
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                  <li><a href="#">Action</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul></div><div class="col-lg-4"></div>
              </div>
              <div class="row"><div class="col-lg-4"></div><div class="col-lg-4">
                <button type="submit" class="btn btn-lg btn-default">Submit</button></div> <div class="col-lg-4"></div></div>
            </form>
          </div>
        </div>
        <!-- search-controller END-->

    </header>
<script src="//code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

如何在中间进行表单输入

2 个答案: