同じ行にブートストラップ行がありません

Question

似たような他の質問を読みましたが、私の問題はより基本的です。私はむしろブートストラップの新機能ですが、電話、タブレット、その他のデバイスで開く必要があるシンプルなフォームでこれが動作するかどうかをテストしています。

テキストボックスを説明するテキストと同じ行にテキストボックスを表示しようとしています。代わりに、テキストボックスがテキストの下にあります。ここで

は何が起こっているかである：ここでは

は、上記のCSHTMLページです：

@model MvcBootstrap.Models.HomeModels.VisitingCustomer 

@{ 
    ViewBag.Title = "Home Page"; 
} 

<div class=""> 
    <p class="lead">Please enter your branch number, account number, and at least the first three characters of your last name or at least the first three characters of your company name below so we can locate your account.</p> 
</div> 

<div class="container"> 

    @using (Html.BeginForm("TypeOfPayment", "Home", FormMethod.Post)) 
    { 
    <div class="row"> 
     <h2>Account Lookup</h2> 

     <div class=".col-md-4"> 
     Branch Number 
     </div> 

     <div class=".col-md-8"> 
     @Html.TextBoxFor(m => m.Branch, new {@class = "", @maxlength = "2"}) 
     </div> 
    </div> 

    <div class="row"> 
     <input id="submitpayment" class="typicalbutton" type="submit" value="Continue" /> 
    </div> 

    } 

</div> 

私は追加のCSSコードを持っていないも、私は、既存のCSSのいずれかを変更しました。

これはかなり正直なはずですが、私は思ったコンセプトを掴んでいません。私は間違って何をしていますか？

Answer 1

あなたはグループ支店番号ともそう

<div class="col-md-4"> 
    <label for="branch-number">Branch Number</label> 
    # add text box here and give it an id="branch-number" 
</div> 

のような1列のテキストボックスは、あなたがする必要はありませんでしたではないclass="col-md-*"を使用する必要がありますあなたのクラスのクラス名の前に.があります。

Answer 2

You can specify the class for different screen 
i.e 
col-lg-1 to col-lg-12 for large screen 
col-md-1 to col-md-12 for desktop/laptop screen 
col-sm-1 to col-sm-12 for tablet screen 
col-xs-1 to col-xs-12 for mobile screen 

Example 

<input type="text" class="col-lg-6 col-md-6 col-sm-6 col-xs-12" > 

Answer 3

この形式を試すことができます。 form-inlineクラスは、フォームをインラインにします。応答可能な列クラスを使用する必要はありません。また、あなたはclass=".col-md-*"

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<form class="form-inline"> 
 
    <div class="form-group"> 
 
     
 
    <label for="branch"> Branch Number</label> 
 
    <input type="text" class="form-control" id="branch no"> 
 
</div> 
 
    <button type="submit" class="btn btn-default">Submit</button> 
 
    
 
</form>

Answer 4

あなたが探しているものはinline formです。

[DisplayName("Branch Number")] 
public string Branch { get; set; } 

あなたがまた読みたくなります：あなたは、私が上記に含まHtml.LabelFor()ヘルパーを使用できるように、あなたの支店プロパティの[DisplayName]属性を追加することになるでしょう、このフォームのモデルで

@using (Html.BeginForm("TypeOfPayment", "Home", FormMethod.Post, new { @class="form-inline" })) 
{ 
    <div class="row">    
     <div class="col-md-12"> 
      <h2>Account Lookup</h2> 
      <div class="form-group"> 
       @Html.LabelFor(m => m.Branch) 
       @Html.TextBoxFor(m => m.Branch, new {@class = "form-control", @maxlength = "2"}) 
      </div> 
      <input id="submitpayment" class="typicalbutton" type="submit" value="Continue" />     
     </div> 
    </div> 
} 

grid systemについて元のコードでは、列に適切なクラスが使用されていませんでした。

Answer 5

@Asifと同じように、Razaは、画面のどのサイズをターゲットにするかを指定する必要があります。サイジングは指定したサイズとUPで機能することに注意してください。したがって、中くらいのサイズの画面を指定すると、中くらいのサイズの画面に影響を与えます。
私はあなたの問題だとは思っていませんが、テキストボックスが下に置かれているのを見ていない余分な余白があると思います。コンテナの最大幅は使用している12列になりますが、その間に他の余白があると、それがテキストボックスを下に落ちます。私はF12で要素を調べて、ゾーンを追加して余分なものがあるかどうかを確認することをお勧めします。