Блог

Я новичок в Bootstrap и надеюсь, что допустил какую-то глупую ошибку, но у меня проблема со столбцами в Chrome. Он отлично работает в Firefox и IE.

Это мой класс столбцов:

 col-lg-2 col-md-4 col-sm-6  
  

Итак, у меня должно быть 6 столбцов на большом дисплее, 3 на среднем, 2 на маленьком…

Это макет:

 @{string classLabel = "col-lg-3"; string classData = "col-lg-9"; string classCol =     "col-lg-2 col-md-4 col-sm-6"; }
<div class="container-fluid">
  <div class="@classCol">
    <div class="@classLabel">@Html.LabelFor(m => m.CountryOriginCode)</div>
    <div class="@classData"> @Html.DropDownListFor(m => m.CountryOriginCode, (IEnumerable<SelectListItem>)ViewBag.CountriesList)</div>
  </div>

... more columns
here are the wrong displaying columns - first OK, second wrong

  <div class="@classCol">
    <div class="@classLabel">@Html.LabelFor(m => m.RES_RolePrimaryID)</div>
    <div class="@classData">
        <select name="RES_RolePrimaryID" id="RES_RolePrimaryID">
            @foreach (var item in RES_Roles.GetRolesList())
            {
                <option value="@item.RoleID">@item.Name</option>
            }
        </select>
    </div>
</div>
<div class="@classCol">
    <div class="@classLabel">@Html.LabelFor(m => m.RES_RoleSecondaryID)</div>
    <div class="@classData">
        <select name="RES_RoleSecondaryID" id="RES_RoleSecondaryID">
            @foreach (var item in RES_Roles.GetRolesList())
            {
                <option value="@item.RoleID">@item.Name</option>
            }
        </select>
    </div>
</div>
</div>
  

С чем я сталкиваюсь, так это с тем, что после второй строки (есть 2 выбора) второй выбор должен начинаться с новой строки, а затем за ним должны быть другие элементы.

НО он отображается как последний столбец следующей строки и как единственный столбец в этой строке.

Я пытался определить, что не так, проверив CSS в Chrome, много раз просматривая код, но все еще не могу поместить его в начало строки

у кого-нибудь есть какие-либо предложения?

вот изображение: