2016-03-28 41 views
0

名前の左隅に検索バーとドロップダウンリストが表示されているレスポンスブートストラップヘッダーを作成しました。今、私は、検索バーの左側にボタンを追加しようとしているが、できないよ...ブートストラップヘッダー内の検索バーの横にボタンを追加

Jsのフィドルhttps://jsfiddle.net/Lucy1/qn0r10th/4/

HTMLコード ..

 <nav class="navbar navbar-default navbar-fixed-top" id="header"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar1"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span>       
       </button> 
       <a href="index.html" class="navbar-brand" id="icon"><b>Sample Name</b></a> 
      </div> 
      <div class="collapse navbar-collapse" id="myNavbar1"> 

       <ul class="nav navbar-nav navbar-right" id="navbar1right"> 
        <li class="dropdown" id="subheader"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
         <ul class="dropdown-menu" id="dropA"> 
         <li><a href="#">Action</a></li> 
         </ul> 
        </li> 
       </ul> 

       <form class="navbar-form navbar-right" role="search" id="navBarSearchForm" type=get action="myindex.html"> 
     <div class="input-group" id ="searchA"> 
     <button onclick="storeYourStuff()" id="button_top_right" class="btn btn-primary">StoreYourStuff</button> 
        <input id="wish_title1" type="text" class="form-control" placeholder="Search Website" name="wish_title1"></input> 
          <span class="input-group-btn"> 
           <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button> 
          </span> 
       </div> 

       </form> 
      </div> 
     </div> 
    </nav> 

へフォームタグ内の検索バーの前にボタンを追加しようとしていますが、できません。私は間違って行くよどこを見つけ出すことはできません。..

+0

を配置する必要があり、私はボタン、検索バーと右の角にその順序でドロップダウンをしたいですヘッダーの – Lucy

+0

ボタングループの外にボタンを置くhttps://jsfiddle.net/3m8Lsxef/ – InferOn

+0

答えはどれですか? – JordanHendrix

答えて

0

あなたのボタンを助けてください、間違った場所にあり、それは、ボタングループの外にする必要があります:

ワーキングフィドルLink

<nav class="navbar navbar-default navbar-fixed-top" id="header"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar1"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span>       
        </button> 
        <a href="index.html" class="navbar-brand" id="icon"><b>Sample Name</b></a> 
       </div> 
       <div class="collapse navbar-collapse" id="myNavbar1"> 

        <ul class="nav navbar-nav navbar-right" id="navbar1right"> 
         <li class="dropdown" id="subheader"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
          <ul class="dropdown-menu" id="dropA"> 
          <li><a href="#">Action</a></li> 
          </ul> 
         </li> 
        </ul> 

        <form class="navbar-form navbar-right" role="search" id="navBarSearchForm" type=get action="myindex.html"> 

      <button onclick="storeYourStuff()" id="button_top_right" class="btn btn-primary">StoreYourStuff</button> 
      <div class="input-group" id ="searchA"> 
         <input id="wish_title1" type="text" class="form-control" placeholder="Search Website" name="wish_title1"> 
           <span class="input-group-btn"> 
            <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button> 
           </span> 
        </div> 
        </form> 
       </div> 
      </div> 
     </nav> 
0

ボタンは、適切なスパン内

<form class="navbar-form navbar-right" role="search" id="navBarSearchForm" type=get action="myindex.html"> 
     <div class="input-group" id ="searchA"> 
     <span class="input-group-btn"><button onclick="storeYourStuff()" id="button_top_right" class="btn btn-primary">StoreYourStuff</button></span> 

        <input id="wish_title1" type="text" class="form-control" placeholder="Search Website" name="wish_title1"> 
          <span class="input-group-btn"> 
           <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button> 
          </span> 
       </div> 
       </form> 
+0

ボタンと検索バーの間にスペースを入れる方法はありますか?小さな画面サイズで検索バーの下にボタンを表示させることができますか? – Lucy

+0

これは正しいと思われます。https://jsfiddle.net/71m4ywad/2/ ...検索バーの下に表示されます.iは分かりません。 – scaisEdge

+0

あなたの答えで行ったように、スパンを使ってスペースを追加する方法はありますか? – Lucy

関連する問題