ブートストラップでフォームを「水平」にしないで入力または選択のサイズを変更するにはどうすればよいですか？

私は自分のフォームコントロールの幅を変更するのに苦労しています、問題は私がいくつかの要素を側面に滑り込ませることです。私はこのようなレイアウトを持つようにしたい：ブートストラップでフォームを「水平」にしないで入力または選択のサイズを変更するにはどうすればよいですか？

label //occupies the entire line 
short input //occupies the entire line 

label //occupies the entire line 
short input //occupies the entire line

これは、あなたが

<div class='form-group> 
<label class="control-label">some text</label> 
<input class="form-control"> 
</div> 
<div class='form-group> 
<label class="control-label">some text</label> 
<input class="form-control"> 
</div>

を使用する場合、私は何とか入力の幅を変更したり、

を選択しようとすると問題があるdefaltの動作です

col-md-1を追加すると2つの問題が発生します。これはテキストラベルを壊してしまいます（col-md-1はコンテナ全体のサイズを変更するため予測できます）。divをインラインにしても、 div。

<div> 
<div class='form-group col-md-1'> 
<label class="control-label"></label> 
<input class="form-control"> 
</div>

あなたは、私は非常に喜んでいるだろういくつかの簡単な構成例を与えることができれば。

出典

2017-03-01 Diego Alves

をway--。私はこれを再現し、私の例では何も起こらなかった、フォームグループは完全な幅のままだった。

は、おそらくこれはあなたが混在するようになっていなかったクラスを混在することになっていないされて、あなた自身にいくつかの手間を省くために、ブートストラップ3について学ぶ必要が

<div class=row> 

    <div class=col-md-1> 

     <div class='form-group'> 
      <label class="control-label"></label> 
      <input class="form-control"> 
     </div> 

    </div> 

</div>

一つのことを必要とするものです。ドキュメンテーションでは、どのクラスを一緒に使うべきかを非常に明確に述べていますが、時にはそれが動作しているように見えるかもしれませんが、ほとんどの場合、より多くの要素を入れ子にする方がよいでしょう。

出典

2017-03-01 13:49:14

私は意図したとおりにフォームをレイアウトしました。しかし、ラベルのテキストと入力に異なる幅のニーズがあるという問題があります。 –

ただ、この中でそれを行うことは、我々はあなたの問題が何であるかを見ることができるようにあなたがフィドルを作成する必要があります

実施例

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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"> 
 
     
 
     <style type="text/css"> 
 
     
 
     </style> 
 
     <script type="text/javascript"> 
 
     
 
     </script> 
 
     </head> 
 
     <body> 
 
<div class="container"> 
 
<div class="row">   
 
<div class="col-md-1 col-xs-1"> 
 
    <div class="form-group"> 
 
    
 
       <label id="label">some text again</label> 
 
       
 
       <input type="text" class="form-control" > 
 
       </div> 
 

 
    
 
<div class='form-group'> 
 
    
 
<label>some text</label> 
 

 
<input class="form-control"> 
 
</div> 
 
</div> 
 
</div> 
 
</div> 
 
</body> 
 
</html>

出典

2017-03-01 13:48:59 neophyte

@Diego Alves：スニペットでラベルと入力の幅が同じであることを確認します。 – neophyte

ブートストラップでフォームを「水平」にしないで入力または選択のサイズを変更するにはどうすればよいですか？

答えて

関連する問題