2016-08-12 12 views
0

に私は、次のレイザービュー私はブートストラップの最新バージョンを使用中心に2つの列(ブートストラップ)

<div class="container"> 

<div class="row well"> 
    <div class="col-md-4 col-md-offset-4"> 
     <h2>Create</h2> 
     <h4>Create Advert</h4> 
    </div> 
</div> 

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 

     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

     <div class="text-danger">@ViewBag.Message</div> 
     <div class="row"> 
      <div class="col-md-1"></div> 
      <div class="col-md-5"> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2 " }) 
        <div class="col-md-8"> 
         @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.Country, htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.DropDownList("CountryDropDown", null, htmlAttributes: new { @class = "form-control", @id = "Country" }) 
         @Html.Hidden("Countries", null, htmlAttributes: new { @class = "form-control", @id = "HiddenCountry" }) 
         @Html.ValidationMessage("CountryDropDown", "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.Subregion, htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.EditorFor(model => model.Subregion, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.ValidationMessageFor(model => model.Subregion, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.EditorFor(model => model.Price, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.CheckBox("PriceCheck", isChecked: false) @Html.DisplayName("Price negotiable") 
         @Html.ValidationMessageFor(model => model.Price, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.BuildingFloorsId, "Floors", htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.DropDownList("FloorsDropDown", null, htmlAttributes: new { @class = "form-control" }) 
         @Html.ValidationMessageFor(model => model.BuildingFloorsId, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.Area, htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.EditorFor(model => model.Area, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.ValidationMessageFor(model => model.Area, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.Label("TPP", htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.EditorFor(model => model.Area, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.ValidationMessageFor(model => model.Area, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.Label("Type of construction", htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.EditorFor(model => model.Interior, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.ValidationMessageFor(model => model.Interior, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.Exterior, htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.EditorFor(model => model.Exterior, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.ValidationMessageFor(model => model.Exterior, "", new { @class = "text-danger" }) 
        </div> 
       </div> 
      </div> 

      <div class="col-md-5"> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.AdvertisementCategoryId, "Category", htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.DropDownList("AdvertisementCategoryId", null, htmlAttributes: new { @class = "form-control", @id = "ddlProductCategory" }) 
         @Html.ValidationMessageFor(model => model.AdvertisementCategoryId, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.State, htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.DropDownList("StateDropDown", null, htmlAttributes: new { @class = "form-control", @id = "State" }) 
         @Html.Hidden("States", null, htmlAttributes: new { @class = "form-control", @id = "HiddenState" }) 
         @Html.ValidationMessage("StateDropDown", "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.Label("Currency", htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.DropDownList("Currency", null, htmlAttributes: new { @class = "form-control", @id = "Currency" }) 
         @Html.Hidden("Currencies", null, htmlAttributes: new { @class = "form-control", @id = "HiddenCurrency" }) 
         @Html.ValidationMessage("Currency", "", new { @class = "text-danger" }) 
        </div> 
       </div> 
       <br> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.FloorId, "Floor", htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.DropDownList("FloorDropDown", null, htmlAttributes: new { @class = "form-control" }) 
         @Html.ValidationMessageFor(model => model.FloorId, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.TelephonNum, htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.EditorFor(model => model.TelephonNum, new { htmlAttributes = new { @class = "form-control", @id = "TelNum" } }) 
         @Html.ValidationMessageFor(model => model.TelephonNum, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.RoomsNumber, htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.EditorFor(model => model.RoomsNumber, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.ValidationMessageFor(model => model.RoomsNumber, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.EditorFor(model => model.Description, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" }) 
        </div> 
       </div> 

       <div class="form-group"> 
        @Html.LabelFor(model => model.Interior, htmlAttributes: new { @class = "control-label col-md-2" }) 
        <div class="col-md-10"> 
         @Html.EditorFor(model => model.Interior, new { htmlAttributes = new { @class = "form-control" } }) 
         @Html.ValidationMessageFor(model => model.Interior, "", new { @class = "text-danger" }) 
        </div> 
       </div> 
      </div> 
      <div class="col-md-1"></div> 
     </div> 

     <div class="row"> 
      <div class="col-md-4 col-md-offset-4"> 

       <div class="form-group"> 
        <img src="@Url.Action("GetCaptchaImage","Captcha")" style="width:300px;" /> 
       </div> 

       <div class="form-group"> 
        @Html.Label("Enter Code", new { @class = "col-md-2 control-label" }) 
        <div class="col-md-10"> 
         @Html.TextBox("CaptchaText", "", new { @class = "form-control" }) 
        </div> 
       </div> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="form-group"> 
       <div class="col-md-4 col-md-offset-4"> 
        <input type="submit" value="Create" class="btn btn-default" style="width:300px;" /> 
       </div> 
      </div> 
     </div> 

    </div> 
} 

を持っています。そのコードを実行すると、結果は良くありません。 enter image description here 列と行が中央揃えされていません。ラベル付きの入力フィールドはブロック要素で、クラス名は「text-center」は機能しません。私は "ブロックセンター"で何もしなかった。私もオフセットを試みました。あなたはいくつかのアイデアを持っているなら、素晴らしいでしょう。

+0

だあなたは私達にあなたを表示することができます出力HTML、それは私たちが修正できるもののより良い表現になるでしょう。すぐに私は '.row'と' .well'を組み合わせるようなBootstrapフレームワークのいくつかの問題を見ています。あなたは '.row'や' .col - * - * 'の中にフォーム自体を持っていません。正しくセンタリングしていません...等 –

答えて

1

特定のブートストラップスタイルを組み合わせる方法が、フレームワークの使用方法と矛盾します。設計要素は、グリッドの流れを妨害することができ、追加のマージンとパディングを追加すると、グリッドの要素は、それらに取り付けられた設計コンポーネント(すなわち。class="row well"を持つべきではありません。フォーム構造でこれらの矛盾した結果を修正

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
      
 
      <div class="well text-center"> 
 
     <h2>Create</h2> 
 
      <h4>Create Advert</h4> 
 
      </div> 
 
      
 
     </div> 
 
    </div> 
 
    
 
    <div class="row"> 
 
     <form class="form-horizontal"> 
 
     
 
<div class="col-xs-6"> 
 
    <div class="form-group"> 
 
    <label for="" class="control-label col-xs-2">Label</label> 
 
    <div class="col-xs-10"> 
 
     <input type="text" name="" class="form-control"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="col-xs-6"> 
 
    <div class="form-group"> 
 
    <label for="" class="control-label col-xs-2">Label</label> 
 
    <div class="col-xs-10"> 
 
     <input type="text" name="" class="form-control"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="col-xs-6"> 
 
    <div class="form-group"> 
 
    <label for="" class="control-label col-xs-2">Label</label> 
 
    <div class="col-xs-10"> 
 
     <select name="" class="form-control"></select> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="col-xs-6"> 
 
    <div class="form-group"> 
 
    <label for="" class="control-label col-xs-2">Label</label> 
 
    <div class="col-xs-10"> 
 
     <select name="" class="form-control"></select> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="col-xs-6"> 
 
    <div class="form-group"> 
 
    <label for="" class="control-label col-xs-2">Label</label> 
 
    <div class="col-xs-10"> 
 
     <input type="text" name="" class="form-control"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="col-xs-6"> 
 
    <div class="form-group"> 
 
    <label for="" class="control-label col-xs-2">Label</label> 
 
    <div class="col-xs-10"> 
 
     <input type="text" name="" class="form-control"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="col-xs-6"> 
 
    <div class="form-group"> 
 
    <label for="" class="control-label col-xs-2">Label</label> 
 
    <div class="col-xs-10"> 
 
     <select name="" class="form-control"></select> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="col-xs-6"> 
 
    <div class="form-group"> 
 
    <label for="" class="control-label col-xs-2">Label</label> 
 
    <div class="col-xs-10"> 
 
     <select name="" class="form-control"></select> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="col-xs-6"> 
 
    <div class="form-group"> 
 
    <label for="" class="control-label col-xs-2">Label</label> 
 
    <div class="col-xs-10"> 
 
     <input type="text" name="" class="form-control"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="col-xs-6"> 
 
    <div class="form-group"> 
 
    <label for="" class="control-label col-xs-2">Label</label> 
 
    <div class="col-xs-10"> 
 
     <input type="text" name="" class="form-control"> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="col-xs-6"> 
 
    <div class="form-group"> 
 
    <label for="" class="control-label col-xs-2">Label</label> 
 
    <div class="col-xs-10"> 
 
     <select name="" class="form-control"></select> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="col-xs-6"> 
 
    <div class="form-group"> 
 
    <label for="" class="control-label col-xs-2">Label</label> 
 
    <div class="col-xs-10"> 
 
     <select name="" class="form-control"></select> 
 
    </div> 
 
    </div> 
 
</div> 
 

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

ブートストラップの<label>には長いラベルで問題があることに注意してください(ラベルは単に魅力的ではありません)。

+0

速い応答ありがとう!しかし、col-xs-6のすべてをどのように集中させるのですか? –

+0

'.container'が画面の100%を占めないようにするには、代わりに' .container-fluid'を使用して固定幅にします。それがあなたの画面の中央に表示されます。 –

+0

すべての入力とラベルを中央に配置したいのは、左側にあるからです。 –

1

私はそれがこの部分であると思いますグラム問題クラス= "COL-MD-4 COL-MD-オフセット-4"

このようなものは大丈夫動作するはずです:

<div class="container"> 

    <div class="row well"> 
    <div class="text-center"> 
     <h2>Create</h2> 
     <h4>Create Advert</h4> 
    </div> 
    </div> 

    <div class="form-horizontal"> 
    <div class="text-danger"></div> 
    <div class="row"> 

     <div class="col-xs-6"> 
     <div class="form-group"> 
      <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
      <div class="col-sm-10"> 
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> 
      </div> 
     </div> 
     </div> 

     <div class="col-xs-6"> 
     <div class="form-group"> 
      <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
      <div class="col-sm-10"> 
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> 
      </div> 
     </div> 
     </div> 

    </div> 
    </div> 

をここでJSFiddle

関連する問題