1. 首頁
  2. 問答
  3. 兩列居中（引導）

兩列居中（引導）

2016-08-12 55 views
0

我有以下的Razor視圖兩列居中（引導）

<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」不起作用;我嘗試了「塊中心」，但沒有。我也試圖抵消。如果你有一些想法，會很棒。

來源

2016-08-12 Dimitar Ganichev

+0

你能告訴我們你輸出HTML，這將是我們可以更正的更好的代表。立即我看到一些Bootstrap框架問題，如將'.row'與'.well'組合在一起，你沒有在'.row'或'.col - * - *'裏面存在這種形式，這可能是爲什麼沒有正確對中......等。 –

回答

1

組合某些Bootstrap樣式的方式與設計框架的使用方式衝突。格子元素不應該貼有他們設計組件（即class="row well"爲設計元素添加額外的margin和padding，可以破壞網格流。

<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>

糾正在你的形式結構中的那些不一致的結果儘管需要注意的是Bootstrap的<label>的長標籤確實存在問題（標籤只會以相當不吸引人的方式向下延伸）

來源

2016-08-12 16:03:55

+0

謝謝你的快速回答！但是如何將所有col-xs-6放在中間？ –

+0

如果您的意思是您不希望'.container'佔用屏幕的100％，請改用'.container-fluid'來強制固定寬度。這會將它們置於屏幕上。 –

+0

我想集中所有的輸入和標籤，因爲現在它們在左側。 –

1

我認爲這部分是causin摹您的問題類= 「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

來源

2016-08-12 16:45:28

相關問題

 相關問題