ブートストラップパネルの使用 - タイトルの横にフォームを挿入するにはどうすればよいですか？

私は少なくとも3つの提案された解決策をこのサイトで検索しようとしましたが、何も機能しませんでした。私は近づいてきたが、パネルの敗北バックラウンドカラーで騙されていた。なんらかの理由で、バックグラウンドは自分の要素の背後に完全な高さを表示していませんでした。私は見出しの横に書式をつけたい。ここで私が試したことがあります。ブートストラップパネルの使用 - タイトルの横にフォームを挿入するにはどうすればよいですか？

<div class="panel panel-default"> 
    <div class="panel-heading"> 

     <div class="no-wrap"> 
     <h3 class="panel-title">My Title</h3> 
     </div> 

     <div class="no-wrap"> 
      <form> 
      <div class="form-group"> 
       <select class="form-control" id="sel1"> 
       <option>1</option> 
       <option>2</option>  
       </select> 
      </div> 
      </form> 
     </div> 

</div> <!-- end panel-heading --> 

<div class="panel-body"> 
    Body Text  
</div> 

</div> <!-- end panel -->

ご覧のクラスは、すべてブートストラップなしのラップです。ノー・ラップのための私のCSSは

.no-wrap { 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
}

だから、これは私の最も希望している解決策でしたが、それでも動作しません。フォームはh3の下にあります。

また、パネル見出しの内側にブートストラップ列を使用してみましたが、デフォルトのグレーの背景が不明瞭になったときです。

このフォームをh3の横に表示するにはどうすればいいですか？画面の幅が十分あると仮定することができます。ユーザーの99.9％がラップトップを使用してこのページにアクセスします。パネルはビジネスレポートを表示するために使用されています。モバイル対応性は優先事項ではありません。

以下は、私が望まないもののスクリーンショットです。見出しの横に入力フォームが必要です。

出典

2017-03-29 Roberto

リンクされた資産（BSなど）でCodepen例を作るだろうか？イメージはまた、達成しようとしていることを示すのにも役立ちます。 – Kerry7777

私は欲しくないもののスクリーンショットを追加しました。私は見出しの横に - 同じ行のように、言いたいので、フォームを望みます。 – Roberto

使用display: flex;

Demo jsfiddle

出典

2017-03-29 08:09:13 jkythc

良いもの！素晴らしいデモそれは私が必要としたものです。 – Roberto

あなたはこの1つを試すことができます。 col-xs-* , col-sm-* , col-md-* , col-lg-*のようなコードにGRID OF BOOTSTRAPを含めるだけです。あなたのケースでカスタムCSSを必要としないでください。あなたは私にさらに質問をすることができます。

<HTML> 
 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
</head> 
 
<body> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 

 
     <div class="row"> 
 
     <div class="col-xs-4 col-md-6 col-lg-6"> 
 
      <h3 class="panel-title">My Title</h3> 
 
     </div> 
 

 
     <div class="col-xs-8 col-md-6 col-lg-6"> 
 
      <form> 
 
      <div class="form-group"> 
 
       <select class="form-control" id="sel1"> 
 
       <option>1</option> 
 
       <option>2</option>  
 
       </select> 
 
      </div> 
 
      </form> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    <!-- end panel-heading --> 
 

 
    <div class="panel-body"> 
 
     Body Text 
 
    </div> 
 

 
    </div> 
 
    <!-- end panel --> 
 
</body> 
 
</HTML>

出典

2017-03-29 08:28:24

私はすでにこの方法を試していましたが、何らかの理由で見出しのデフォルトの背景色がクリップされてしまいました。言い換えれば、フォームは見出しの横に表示されますが、背景色はdivの上半分のみに表示されます。 – Roberto

ブートストラップパネルの使用 - タイトルの横にフォームを挿入するにはどうすればよいですか？

答えて

関連する問題