ブートストラップ3 - ページヘッダ内の入力グループ

ページヘッダ内の入力グループを移動しようとしています。私が列で行を使用しようとすると、HRは私を悩ますすべての方法で実行されません。ブートストラップ3 - ページヘッダ内の入力グループ

これは私が達成しようとしているものです。ここで

<div class="row"> 
    <div class="col-md-8"> 
     <div class="page-header"> 
     <h3 class="text-primary">EMP <small>My Dashboards</small></h3> 
     </div> 
    </div> 
    <div class="col-md-4"> 
     <div class="input-group"> 
     <span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i>&nbsp;&nbsp;Search</span> 
     <input type="text" class="form-control" placeholder="Search Results..." id="search" name="search"> 
     </div> 
    </div> 
</div>

はフィドルです：https://jsfiddle.net/eo75juzL/

私はちょうど右整列するために、検索入力グループを移動しようとしていますH3と入力して、行全体を実行してください。

出典

2017-02-14 SBB

あなたのフィドルでは、右揃えであることがわかります。だから問題は別の場所になければならない。 – Sebastian

@Sebastian - 私が修正しようとしている 'col-8'だけにまたがっているため、ページヘッダーの下の境界線が切れることもわかります。私はその幅を定義することがそれを含むことを理解していますが、行/列なしで同じ行にそれを保持する方法を知りません – SBB

このように？ https://jsfiddle.net/eo75juzL/5/ – Sebastian

fiddleを更新しました。

水平線はpage-headerの一部なので、このdiv内の列を移動しました。通常のブートストラップ動作が適用され、検索ボックスが右揃えになりました。

出典

2017-02-14 17:23:12 Brino

ヘッダーの内側に検索ボックスを配置するにはこのCSSを追加する必要があります。

.dashboard { 
 
    margin-top: -40px; 
 
} 
 
.dash_input { 
 
    margin-top: -30px; 
 
}

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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.6/js/bootstrap.min.js"></script> 
 
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
 
      </head> 
 
      <body> 
 
      <div class="row"> 
 
      <div class="page-header"> 
 
     <div class=" dashboard col-md-8 col-lg-8 col-sm-8 col-xs-8 "> 
 
    
 
     <h3 class="text-primary">EMP <small>My Dashboards</small></h3> 
 
    </div> 
 
     <div class="dash_input col-md-4 col-lg-4 col-sm-4 col-xs-4 pull-right"> 
 
     <div class="input-group"> 
 
      <span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i>&nbsp;&nbsp;Search</span> 
 
      <input type="text" class="form-control" placeholder="Search Results..." id="search" name="search"> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    </div> 
 
      </body> 
 
      </html>

.dash_input { 
margin-top: -30px; 
}

は、あなたのdivのマークアップでいくつかの問題を抱えていました。それを修正しようとしました。上記のスニペットを見てください。また、 class="navbar"を使用することをお勧めします。その場合、より柔軟に対応できます。

出典

2017-02-14 16:51:50 neophyte

ブートストラップ3 - ページヘッダ内の入力グループ

答えて

関連する問題