#html #css #bootstrap-4
#HTML #css #bootstrap-4
Вопрос:
Я реализую пользовательский интерфейс для приложения angular 7 с использованием bootstrap. Форма пользовательского интерфейса содержит четыре элемента в строке. Слева у вас есть ярлык и элемент управления вводом, а справа — аналогичный. Итак, я попытался установить col-md-2 для обеих меток и col-md-3 для обеих форм. Когда я это делаю, справа остается пробел, и я предполагаю, что это потому, что общее количество столбцов составляет 10. Если я увеличу ввод как с левой, так и с правой стороны на 1, то есть col-md-4, самый правый элемент управления коснется границы. Мне нужно, чтобы левый и правый столбцы были одинаковыми с небольшим запасом на левой и правой сторонах границы.
Мне удалось создать stackblitz для воспроизведения проблемы. Также решена проблема с правильным интервалом. Вы можете видеть, что стиль прокомментирован в stackblitz. Как мне создать интервал между элементами управления, поскольку на данный момент он слишком загроможден. Также я хочу, чтобы это выглядело сложенным на маленьком экране. Пожалуйста, смотрите обновленный скриншот ниже для справки. Его помеченный обновленный вывод
stackblitz.com/edit/angular-uypvsy
Вот скриншоты
с col-md-3
С помощью cold-md-4, примененного только к первой строке
HTML-код
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card">
<div class="card-header panel-heading">
<span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
<div class="pull-right" style="padding-right:10px;">
<label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }">
<input type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>
</div>
</div>
<div class="card-body">
<div *ngIf="FundDetails" class="card-body" style="width:100%">
<div class="form-group row">
<label for="inputName" class="col-md-2 col-sm-11 col-form-label modal-label header">Name</label>
<div class="col-md-4 col-sm-11 ">
<div *ngIf="!EditMode">{{FundDetails?.FundName}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.FundName" />
</div>
<label for="inputOffice" class="col-md-2 col-sm-11 col-form-label header">Investment Status</label>
<div class="col-md-4 col-sm-11">
<div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId" [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group row">
<label for="inputTitle" class="col-md-2 col-sm-11 col-form-label header">Make Anonymous</label>
<div class="col-md-3 col-sm-11">
<div *ngIf="!EditMode">{{FundDetails?.IsAnonymous ? "Yes" : "No"}}</div>
<label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.IsAnonymous"
value="{{FundDetails.IsAnonymous}}" [(ngModel)]="FundDetails.IsAnonymous"
style="width: 13px; height: 13px;" />amp;nbsp;amp;nbsp;{{FundDetails.IsAnonymous ? "Yes" : "No"}}</label>
</div>
<label for="inputEmail" class="col-md-2 col-sm-11 col-form-label header">Flagship</label>
<div class="col-md-3 col-sm-11">
<div *ngIf="!EditMode">{{FundDetails?.FlagShipFundName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.FlagShipFundId" [data]="FundDetails.FlagshipFunds" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
Updated html based on suggestion
<div class="card">
<div class="card-header panel-heading">
<span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
<div class="pull-right" style="padding-right:10px;">
<label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }">
<input type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>
</div>
</div>
<div class="card-body">
<div *ngIf="FundDetails" class="card-body" style="width:100%">
<div class="form-row">
<label for="inputName" class="col-md-2 col-form-label modal-label header">Name</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.FundName}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.FundName" />
</div>
<label for="inputOffice" class="col-md-2 col-form-label header">Investment Status</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId" [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-row">
<label for="inputTitle" class="col-md-2 col-form-label header">Make Anonymous</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.IsAnonymous ? "Yes" : "No"}}</div>
<label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.IsAnonymous"
value="{{FundDetails.IsAnonymous}}" [(ngModel)]="FundDetails.IsAnonymous"
style="width: 13px; height: 13px;" />amp;nbsp;amp;nbsp;{{FundDetails.IsAnonymous ? "Yes" : "No"}}</label>
</div>
<label for="inputEmail" class="col-md-2 col-form-label header">Flagship</label>
<div class="col-md-3 ">
<div *ngIf="!EditMode">{{FundDetails?.FlagShipFundName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.FlagShipFundId" [data]="FundDetails.FlagshipFunds" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-row">
<!-- <label for="inputFax" class="col-md-2 col-form-label header">Inception Date</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{formatInceptionDate}}</div>
<kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd MMM, yyyy'" [(ngModel)]="getInceptionDate">
</kendo-datepicker>
</div> -->
<label for="inputFax" class="col-md-2 col-form-label header">Inception Date</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails.InceptionDate}}</div>
<kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd-MMM-yyyy'" [value]="getInceptionDate" [(ngModel)]="FundDetails.InceptionDate" (valueChange)="inceptionDateChanged($event)">
</kendo-datepicker>
</div>
<label for="inputEmail" class="col-md-2 col-form-label header">Account Mandate</label>
<div class="col-md-4 ">
<div *ngIf="!EditMode">{{FundDetails?.AccountMandateName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.AccountMandateId" [data]="FundDetails.AccountMandates" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-row">
<label for="inputEmail" class="col-md-2 col-form-label header">Vehicle Type</label>
<div class="col-md-4 ">
<div *ngIf="!EditMode">{{FundDetails?.VehicleTypeName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.VehicleTypeId" [data]="FundDetails.VehicleTypes" [filterable]="false" textField="NAME" [valuePrimitive]="true" (valueChange)="vehicleTypeChanged($event)">
valueField="ID">
</kendo-dropdownlist>
</div>
<label for="inputEmail" class="col-md-2 col-form-label header">Bloomberg Ticker</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.BloombergTicker}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.BloombergTicker" />
</div>
</div>
<div class="form-row">
<label for="inputEmail" class="col-md-2 col-form-label header">Primary Class</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.PrimaryClassDescripton}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.PrimaryClassId" [data]="FundDetails.PrimaryClasses" [filterable]="false" textField="DESCRIPTION" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-row">
<div class="col-md-8" style="padding-top:10px;padding-left: 0px;padding-right: 30px;">
<div class="desc-header">Details</div>
<div class="divEditor">
<ckeditor [editor]="Editor" [id]="'ckDetails'" *ngIf="EditMode" style="font-size: 11px;" debounce="500" [config]="EditorConfig" [(ngModel)]="FundDetails.AccountMandateCustomisation">
</ckeditor>
<div style="padding: 10px" *ngIf="!EditMode" [innerHTML]="FundDetails.AccountMandateCustomisation">
</div>
</div>
</div>
</div>
</div>
<div class="btn-toolbar" style="padding-top:40px;">
<!-- <span> <button class="btn btn-default btn mr-3">
<i class="fa fa-file-pdf-o"></i>
View Fund Snapshot
</button>
</span> -->
<span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="updateFund()">Save</button>
</span>
<span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="cancelFund">Cancel</button>
</span>
<span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
(click)="deleteFund()">Delete</button>
</span>
</div>
</div>
</div>
<div class="card">
<div class="card-header panel-heading">
<span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
<div class="pull-right" style="padding-right:10px;">
<label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }">
<input type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>
</div>
</div>
<div class="card-body">
<div *ngIf="FundDetails" class="card-body" style="width:100%">
<div class="form-group row">
<label for="inputName" class="col-md-2 col-sm-11 col-form-label modal-label header">Name</label>
<div class="col-md-4 col-sm-11 ">
<div *ngIf="!EditMode">{{FundDetails?.FundName}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.FundName" />
</div>
<label for="inputOffice" class="col-md-2 col-sm-11 col-form-label header">Investment Status</label>
<div class="col-md-4 col-sm-11">
<div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId" [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-group row">
<label for="inputTitle" class="col-md-2 col-sm-11 col-form-label header">Make Anonymous</label>
<div class="col-md-3 col-sm-11">
<div *ngIf="!EditMode">{{FundDetails?.IsAnonymous ? "Yes" : "No"}}</div>
<label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.IsAnonymous"
value="{{FundDetails.IsAnonymous}}" [(ngModel)]="FundDetails.IsAnonymous"
style="width: 13px; height: 13px;" />amp;nbsp;amp;nbsp;{{FundDetails.IsAnonymous ? "Yes" : "No"}}</label>
</div>
<label for="inputEmail" class="col-md-2 col-sm-11 col-form-label header">Flagship</label>
<div class="col-md-3 col-sm-11">
<div *ngIf="!EditMode">{{FundDetails?.FlagShipFundName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.FlagShipFundId" [data]="FundDetails.FlagshipFunds" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
Updated html based on suggestion
<div class="card">
<div class="card-header panel-heading">
<span style="font-size: 18px; font-weight: bold; ">Fund Details</span>
<div class="pull-right" style="padding-right:10px;">
<label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }">
<input type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>
</div>
</div>
<div class="card-body">
<div *ngIf="FundDetails" class="card-body" style="width:100%">
<div class="form-row">
<label for="inputName" class="col-md-2 col-form-label modal-label header">Name</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.FundName}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.FundName" />
</div>
<label for="inputOffice" class="col-md-2 col-form-label header">Investment Status</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.InvestmentStatusName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.InvestmentStatusId" [data]="FundDetails.InvestmentStatuses" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-row">
<label for="inputTitle" class="col-md-2 col-form-label header">Make Anonymous</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.IsAnonymous ? "Yes" : "No"}}</div>
<label *ngIf="EditMode"> <input type="checkbox" [checked]="FundDetails.IsAnonymous"
value="{{FundDetails.IsAnonymous}}" [(ngModel)]="FundDetails.IsAnonymous"
style="width: 13px; height: 13px;" />amp;nbsp;amp;nbsp;{{FundDetails.IsAnonymous ? "Yes" : "No"}}</label>
</div>
<label for="inputEmail" class="col-md-2 col-form-label header">Flagship</label>
<div class="col-md-3 ">
<div *ngIf="!EditMode">{{FundDetails?.FlagShipFundName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.FlagShipFundId" [data]="FundDetails.FlagshipFunds" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-row">
<!-- <label for="inputFax" class="col-md-2 col-form-label header">Inception Date</label>
<div class="col-md-3">
<div *ngIf="!EditMode">{{formatInceptionDate}}</div>
<kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd MMM, yyyy'" [(ngModel)]="getInceptionDate">
</kendo-datepicker>
</div> -->
<label for="inputFax" class="col-md-2 col-form-label header">Inception Date</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails.InceptionDate}}</div>
<kendo-datepicker *ngIf="EditMode" style="width:100%" [format]="'dd-MMM-yyyy'" [value]="getInceptionDate" [(ngModel)]="FundDetails.InceptionDate" (valueChange)="inceptionDateChanged($event)">
</kendo-datepicker>
</div>
<label for="inputEmail" class="col-md-2 col-form-label header">Account Mandate</label>
<div class="col-md-4 ">
<div *ngIf="!EditMode">{{FundDetails?.AccountMandateName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.AccountMandateId" [data]="FundDetails.AccountMandates" [filterable]="false" textField="NAME" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-row">
<label for="inputEmail" class="col-md-2 col-form-label header">Vehicle Type</label>
<div class="col-md-4 ">
<div *ngIf="!EditMode">{{FundDetails?.VehicleTypeName}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.VehicleTypeId" [data]="FundDetails.VehicleTypes" [filterable]="false" textField="NAME" [valuePrimitive]="true" (valueChange)="vehicleTypeChanged($event)">
valueField="ID">
</kendo-dropdownlist>
</div>
<label for="inputEmail" class="col-md-2 col-form-label header">Bloomberg Ticker</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.BloombergTicker}}</div>
<input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control" [(ngModel)]="FundDetails.BloombergTicker" />
</div>
</div>
<div class="form-row">
<label for="inputEmail" class="col-md-2 col-form-label header">Primary Class</label>
<div class="col-md-4">
<div *ngIf="!EditMode">{{FundDetails?.PrimaryClassDescripton}}</div>
<kendo-dropdownlist *ngIf="EditMode" style="width:100%" [(ngModel)]="FundDetails.PrimaryClassId" [data]="FundDetails.PrimaryClasses" [filterable]="false" textField="DESCRIPTION" [valuePrimitive]="true" valueField="ID">
</kendo-dropdownlist>
</div>
</div>
<div class="form-row">
<div class="col-md-8" style="padding-top:10px;padding-left: 0px;padding-right: 30px;">
<div class="desc-header">Details</div>
<div class="divEditor">
<ckeditor [editor]="Editor" [id]="'ckDetails'" *ngIf="EditMode" style="font-size: 11px;" debounce="500" [config]="EditorConfig" [(ngModel)]="FundDetails.AccountMandateCustomisation">
</ckeditor>
<div style="padding: 10px" *ngIf="!EditMode" [innerHTML]="FundDetails.AccountMandateCustomisation">
</div>
</div>
</div>
</div>
</div>
<div class="btn-toolbar" style="padding-top:40px;">
<!-- <span> <button class="btn btn-default btn mr-3">
<i class="fa fa-file-pdf-o"></i>
View Fund Snapshot
</button>
</span> -->
<span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="updateFund()">Save</button>
</span>
<span><button type="button" class="btn btn-primary btn-view-all btn mr-3"
(click)="cancelFund">Cancel</button>
</span>
<span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"
(click)="deleteFund()">Delete</button>
</span>
</div>
</div>
</div> Обновлен вывод, основанный на предложении на большом экране
Обновлен вывод, основанный на предложении на маленьком экране
Комментарии:
1. Ваш CSS-код может иметь решающее значение для предоставления вам решения. Пожалуйста, включите это в свой вопрос. (спасибо)
2. Я бы всегда советовал вам начинать разработку с маленького экрана, а затем переходить к экрану большего размера.
Ответ №1:
Простое удаление или комментирование класса header значительно улучшает представление на мобильных устройствах: 
С другой стороны, есть div, подобные <div *ngIf ="IsVehicleDependent"> которые ведут себя как столбец, даже если у них нет класса col-sm -... . Я изучаю ReactJS, и для этих случаев есть <React.Fragment> . Я искал что-то подобное для Angular и нашел <ng-container> . Я применил его и улучшил вид рабочего стола.
Комментарии:
1. Ваши комментарии были действительно полезны. Не могли бы вы рассказать мне, как улучшить расстояние между элементами управления. На данный момент они прилипают друг к другу. Как сверху вниз, так и сбоку.
2. Между Name, Make Anonymous, VehicleType и т.д. Должен быть пробел, А также некоторый интервал между элементом управления вводом имени и меткой статуса вложения
3. Замена
<div class = "form-row">на<div class = "form-group row">и добавление стилей CSS.card-body label {text-align: right}могут быть улучшены.4. Изначально у меня была строка form-group, и я изменил ее на form-row в соответствии с вашим предыдущим предложением
5. Как вы думаете, размер метки и выпадающего списка должен быть одинаковым
Ответ №2:
Не проводя тест с самим углом и не просматривая код, я бы изменил «строка группы форм» на «строка формы». Это также позволило бы устранить «col-sm-11». И, кроме того, закройте как минимум 3 div (). Структура должна быть больше похожа на эту:
<div class="card">
<div class="card-header panel-heading">
Fund Details
</div>
<div class="card-body">
<div *ngIf="FundDetails">
<div class="form-row">
<label class="col-md-2 col-form-label">Label 1</label>
<div class="col-md-4">
<input type="text" class="form-control" value="Input 1">
</div>
<label class="col-md-2 col-form-label">Label 2</label>
<div class="col-md-4">
<input type="text" class="form-control" value="Input 2">
</div>
</div>
<div class="form-row">
<label class="col-md-2 col-form-label">Label 3</label>
<div class="col-md-4">
<input type="text" class="form-control" value="Input 3">
</div>
<label class="col-md-2 col-form-label">Label 4</label>
<div class="col-md-4">
<input type="text" class="form-control" value="Input 4">
</div>
</div>
</div>
</div>
</div>
С другой стороны, будут ли необходимы два DIV с классом «card-body»?
Комментарии:
1. Я попытался включить в сообщение ваши предложения. Я обновил сообщение новым HTML и тем, как выходные данные выглядят на большом и маленьком экране. Если вы видите, что у меня все еще есть проблема с элементами управления вводом, простирающимися до границы. Также нет отступов или пробелов между элементами управления. Я предполагаю, что это после удаления строки группы форм
2. ммм, HTML-код выглядит более сложным. Согласно последнему обновленному вами HTML-коду, я вижу много вложенных
cards. В этих случаях лучше выполнять сборку с использованием тестовых данных, и как только дизайн начнет работать правильно, замените его на Angular.3. Мне удалось создать stackbliz. Удалось устранить пробел справа. Я прокомментировал стиль. Вы можете увидеть это на stackblitz. Но как я собираюсь разместить промежутки между элементами управления. С тех пор, как я изменил его на form-row. stackblitz.com/edit/angular-uypvsy
Ответ №3:
Вам нужно добавить к .header элементам адаптивное правило CSS. Я вижу, что они установлены на width: 8%; в настоящее время, что выглядит нормально, когда макет широкий, но при узкой ширине становится неровным. Измените ширину на 100%, и это действительно выглядит нормально. Что-то вроде этого:
@media (max-width: 'YOUR_BREAKPOINT_WIDTH_HERE') {
.header {
width: 100%;
}
}