2016-03-05 38 views
0

你好我使用引導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; 
} 

,但我的代碼輸入搜索和其他按鈕不能得到艾琳甚至我用display:inline-block如何做到這一點?以及如何使它即使我儘量減少移動,因爲當我最大限度地減少我的按鈕崩潰突然不能colapse?

,或者你可以點擊這裏 http://codepen.io/vicario/pen/graqPm

感謝

+0

究竟你的意思:「我想從搜索和類似2下拉3按鈕,就可把和搜索按鈕」。 。請更清楚地指明您的要求 –

+0

我的意思是輸入類型的搜索與2按鈕下拉和按鈕提交先生,它會得到顯示inline-block.my壞先生 – vicario

+0

如果你明確指出你的問題,你會得到更好的幫助。記住用戶在這裏不知道你的代碼。 –

回答

0

結果是這樣的,你在找什麼?我把表單元素放入一個.container格中,將.dropdown.search-controller .form-control更改爲display:inline-block,並從.search-controller .form-control中刪除相對定位。此外,我添加了form-inline類形式:

#slider img { 
 
    width: 100%; 
 
    /*height: 50%;*/ 
 
} 
 

 
.search-controller .form-control { 
 
    width: 60%; 
 
    display:inline-block; 
 
} 
 

 
.dropdown{ 
 
\t display:inline-block; 
 
} 
 

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

 

 

 
.position-relative { 
 
    position: relative; 
 
}
<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 --> 
 
\t <div class="container"> 
 
\t 
 

 
    <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"> 
 
\t \t \t \t \t <div class="dropdown"> 
 
\t \t \t \t \t \t <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
\t \t \t \t \t \t \t Dropdown1 
 
\t \t \t \t \t \t \t <span class="caret"></span> 
 
\t \t \t \t \t \t </button> 
 
\t \t \t \t \t \t <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
\t \t \t \t \t \t \t <li><a href="#">Action</a></li> 
 
\t \t \t \t \t \t \t <li role="separator" class="divider"></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Separated link</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="dropdown"> 
 
\t \t \t \t \t \t <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
 
\t \t \t \t \t \t \t Dropdown2 
 
\t \t \t \t \t \t \t <span class="caret"></span> 
 
\t \t \t \t \t \t </button> 
 
\t \t \t \t \t \t <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
 
\t \t \t \t \t \t \t <li><a href="#">Action</a></li> 
 
\t \t \t \t \t \t \t <li role="separator" class="divider"></li> 
 
\t \t \t \t \t \t \t <li><a href="#">Separated link</a></li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <button type="submit" class="btn btn-default">Submit</button> 
 
      </form> 
 
     </div> 
 
    </div> 
 
    <!-- search-controller END--> 
 
\t </div> 
 
\t </header>

0
 #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> 
+0

從我上面的例子我希望你有一個想法排col容器等PLZ閱讀更多回合他們..好運氣 –

相關問題