Проблемка при переходе с bootstrap 3.3.7 на 4.1.0

[mstdmstd]

Всем привет,
В Laravel 5.6 /vuejs2.5 приложении перешел с bootstrap 3.3.7 на 4.1.0 и читая доку http://bootstrap-4.ru/docs/4.1/migration/
поменял классы в своих тиемплейтах Но кое что работает неправильно .
У меня есть редактор одной строки, и он выглядит очень узко хотя должен быть максимально широко на любом устройстве.
Printscreen
И непонятно почему в диве с классом

card-body

рядом появилcя класс

table-responsive

который я не вс тавлял - так как на этой странице таблицы нет ...
 

<div id="app" style="background-color: blue" style="background-color: yellow; border: 2px dotted green; width: 100%" class="col-12">

<app-header ></app-header>

@yield('content')

<status-line></status-line>
</div>

У меня в resources/views/layouts/app.blade.php :

И сам редактор :

<template >
<div style="border: 2px dotted green; width: 100%" class="col-12 ">

<div class=" " style="">

<div class="card-body ">
<form @submit.prevent="validateBeforeSubmit" class="form-horizontal">

<div class="row " v-if="!is_insert">
<div class="col-12 form-group">
<label class="col-12 control-label">ID</label>
<div class="col-12 ">
<input type="text" v-model="documentCategory.id" class="form-control integer_input" readonly>
</div>
</div>
</div>
<div class="row">
<div class="col-12 form-group">
<label class="col-12 control-label" for="name">Name<span class="required"> * </span></label>
<div class="col-12 ">
<input id="name" name="name" v-validate="'required|max:255'" v-model="documentCategory.name"
:class="{ 'form-control':true, 'input': true, 'text-danger': vueErrorsList.has('name') }" type="text" placeholder="Enter unique name of document category">
<span v-show="vueErrorsList.has('name')" class="text-danger">{{ vueErrorsList.first('name') }}</span>
</div>
</div>
</div>

<div class="row">
<div class="col-12 form-group">
<label class="col-12 control-label" for="type">Type <span class="required"> * </span></label>
<div class="col-12 ">
<select id="type" name="type" v-validate="'required'" :class="{ 'form-control':true, 'errors':
vueErrorsList.has('type') }"
v-model="documentCategory.type">
<option value=""> -Select type- </option>
<option v-for="nextType, index in documentCategoryTypeSelectionList" v-bind:value="nextType.key">{{ nextType.label }}
</option>
</select>
<span v-show="vueErrorsList.has('type')" class="text-danger">{{ vueErrorsList.first('type') }}</span>
</div>

</div>
</div>

<div class="row">
<div class="col-12 form-group">
<label class="col-12 control-label" for="document_category_content">Description<span class="required"> * </span>
<br><small style="font-weight: normal">Markdown format</small>
</label>
<div class="col-12 ">
<markdown-editor :content="documentCategory.description" :editor_type="'document_category'" :unique_id="document_category_id"
:how_short_help_text=true :show_full_help_link=true></markdown-editor>
</div>
</div>
</div>

<div class="row" v-if="!is_insert">
<div class="col-12 form-group">
<label class="col-12 control-label">Created at</label>
<div class="col-12 ">
<input type="text" v-model="documentCategory.created_at_label" class="form-control" readonly>
</div>
</div>
</div>

<div class="row float-right">
<editor-buttons :submit_label="submit_label" cancel_label="Cancel" :cancel_link="'#/admin/document_categories'" :is_page_updating="is_page_updating"></editor-buttons>
</div>

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

Не подскажите в чем проблема и как ее исправить ?

И что еще в верстке выше надо было исправить при переходе на Bs 4.1.0 ?

Спасибо!
 

[mrnobody]

col должен быть вложен непосредственно в row. А у вас в row вложен блок card.

Вот так должно быть.

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="card">
        …
      </div>
    </div>
  </div>
</div>

И то, если колонка на всю ширину, то нет смыла в блоках row и col-12

То есть, вот так тоже должно сработать:

<div class="container">
  <div class="card">
    …
  </div>
</div>

 

[mstdmstd]

Спасибо!
Не выходит...
Делаю :

<template >

<div class=" container" >


<form @submit.prevent="validateBeforeSubmit" class="form-horizontal">

<div class="card ">
<div class="row col-12" v-if="!is_insert">
<label class="col-12 col-sm-4 control-label">ID</label>
<div class="col-12 col-sm-8">
<input type="text" v-model="documentCategory.id" class="form-control-sm integer_input" readonly>
</div>
</div>
</div>

<div class="card ">
<div class="row col-12">
<label class="col-12 col-sm-4 control-label" for="name">Name<span class="required"> * </span></label>
<div class="col-12 col-sm-8">
<input id="name" name="name" v-validate="'required|max:255'" v-model="documentCategory.name"
:class="{ 'form-control-sm':true, 'input': true, 'text-danger': vueErrorsList.has('name') }" type="text" placeholder="Enter unique name of document category">
<span v-show="vueErrorsList.has('name')" class="text-danger">{{ vueErrorsList.first('name') }}</span>
</div>
</div>
</div>

И опять редактор узок https://imgur.com/a/tfJiNpy

похоже что-то сверху сжало...