1. дома
  2. Вопрос и ответ
  3. Две колонки по центру (Bootstrap)

Две колонки по центру (Bootstrap)

2016-08-12 5 views
0

У меня есть следующие Razor ПосмотретьДве колонки по центру (Bootstrap)

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

Я использую последнюю версию Bootstrap. Когда я запускаю этот код, результат не является хорошим. enter image description here Столбцы и ряд не центрированы. Поля ввода с их метками являются блочными элементами, а имя класса: «text-center» не работает; Я пробовал с «блок-центром», но ничего. Я также попытался с компенсированием. Если у вас есть идеи, будет здорово.

источник

2016-08-12 Dimitar Ganichev

+0

Можете ли вы показать нам свою вывода HTML, это будет лучшее представление о том, что мы можем исправить. Сразу же я вижу некоторые проблемы с компоновкой Bootstrap, такие как объединение '.row' с' .well', у вас нет самой формы внутри '.row' или' .col - * - * ', что, вероятно, не центрируется должным образом ... и т. д. –

ответ

1

Способ объединения определенных стилей Bootstrap противоречит тому, как структура предназначена для использования. Сетка элементы не должны иметь конструктивные элементы, прикрепленные к ним (то есть. 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>

Исправления этих несоответствий результатов в виде структуры правильно ли выровнять, хотя следует отметить, что у Bootstrap's <label> есть проблемы с более длинными надписями (ярлык просто будет уменьшаться довольно непривлекательным образом).

источник

2016-08-12 16:03:55

+0

Благодарим вас за быстрый ответ! Но как центрировать все col-xs-6? –

+0

Если вы хотите, чтобы '.container' занимал 100% экрана, используйте' .container-fluid' вместо этого, чтобы зафиксировать фиксированную ширину. Это будет центрировать их на экране. –

+0

Я хочу сосредоточить все входы и метки, потому что теперь они находятся в левой части. –

1

Я думаю, что эта часть является причиной г ваша проблема класс = "Col-мкр-4 цв-й мкр-офсет-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

Смежные вопросы

 Смежные вопросы