!1659 feat(#I43BWR): add inline layout for Row component

* doc: 更新 Row inline 布局示例
* chore: 更新打包脚本与样式
* doc: 更新注释
* style: 适配 CheckboxList 组件 inline 布局
* style: 适配 inline 模式下 switch 组件
* style: 修复 inline 模式下垂直对齐问题
* feat: 增加 inline 模式
* feat: 增加 inline 样式

src/BootstrapBlazor.Shared/Pages/Samples/Rows.razor

@@ -31,6 +31,20 @@
     </Row>
 </Block>
 
+<Block Title="放置表单控件（内联）" Introduction="当放置表单控件时，可以指定 <code>RowType</code> 为 <code>Inline</code>，会将 <b>Label</b> 显示在左边，控件充满剩余空间">
+    <p>本例中 <code>Row</code> 组件内置于 <code>ValidateForm</code> 组件内，自动增加前置 <code>Label</code> 标签</p>
+    <ValidateForm Model="@Model">
+        <Row ItemsPerRow="ItemsPerRow.Two" RowType="RowType.Inline">
+            <CheckboxList @bind-Value="@Model.Hobby" Items="Hobbys" />
+            <BootstrapInput @bind-Value="@Model.Address" />
+            <DateTimePicker @bind-Value="@Model.DateTime" />
+            <BootstrapInputNumber @bind-Value="@Model.Count" />
+            <Switch @bind-Value="@Model.Complete" />
+            <Select @bind-Value="@Model.Education" />
+        </Row>
+    </ValidateForm>
+</Block>
+
 <Block Title="放置表单控件" Introduction="当放置表单控件时，可以指定 <code>RowType</code> 为 <code>FormRow</code>，会将 <b>Label</b> 显示在上边，控件充满">
     <p>本例中 <code>Row</code> 组件内置于 <code>ValidateForm</code> 组件内，自动增加前置 <code>Label</code> 标签</p>
     <ValidateForm Model="@Model">

src/BootstrapBlazor/Components/Checkbox/CheckboxList.css

@@ -4,10 +4,11 @@
     display: flex;
     flex-flow: row wrap;
     padding-bottom: 0;
+    overflow: hidden;
+    vertical-align: top;
 }
 
     .checkbox-list.is-vertical {
-        display: flex;
         flex-direction: column;
     }
 
@@ -42,9 +43,3 @@
     .checkbox-list.form-control:not(.is-invalid):focus {
         box-shadow: none;
     }
-
-@media (min-width: 576px) {
-    .checkbox-list {
-        display: flex;
-    }
-}

src/BootstrapBlazor/Components/Row/Row.css

@@ -0,0 +1,21 @@
+@media (min-width: 576px) {
+    .form-inline .form-label {
+        padding: 7px 0;
+        margin-bottom: 0;
+        margin-right: 10px;
+        width: 90px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        vertical-align: top;
+    }
+
+        .form-inline .form-label + * {
+            display: inline-block;
+            width: calc(100% - 100px);
+        }
+
+        .form-inline .form-label + .switch {
+            padding: 7px 0;
+        }
+}

src/BootstrapBlazor/Components/Row/Row.razor

@@ -1,6 +1,6 @@
 @namespace BootstrapBlazor.Components
 @inherits BootstrapComponentBase
 
-<div @attributes="@AdditionalAttributes" data-toggle="row" data-items="@ItemsPerRow.ToDescriptionString()" data-colspan="@ColSpan" class="d-none" @ref="RowElement">
+<div @attributes="@AdditionalAttributes" data-toggle="row" data-type="@RowType.ToDescriptionString()" data-items="@ItemsPerRow.ToDescriptionString()" data-colspan="@ColSpan" class="d-none" @ref="RowElement">
     @ChildContent
 </div>

src/BootstrapBlazor/Components/Row/Row.razor.cs

@@ -18,6 +18,12 @@ namespace BootstrapBlazor.Components
         [Parameter]
         public ItemsPerRow ItemsPerRow { get; set; }
 
+        /// <summary>
+        /// 获得/设置 设置行格式 默认 Row 布局
+        /// </summary>
+        [Parameter]
+        public RowType RowType { get; set; }
+
         /// <summary>
         /// 获得/设置 子 Row 跨父 Row 列数 默认为 null
         /// </summary>

src/BootstrapBlazor/Enums/RowType.cs

@@ -0,0 +1,26 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using System.ComponentModel;
+
+namespace BootstrapBlazor.Components
+{
+    /// <summary>
+    /// 行内格式枚举
+    /// </summary>
+    public enum RowType
+    {
+        /// <summary>
+        /// 默认格式
+        /// </summary>
+        [Description("row")]
+        Normal,
+
+        /// <summary>
+        /// 表单中使用 label 在左，控件不充满
+        /// </summary>
+        [Description("inline")]
+        Inline
+    }
+}

src/BootstrapBlazor/wwwroot/lib/extensions/longbow.grid.js

@@ -7,10 +7,11 @@
     var Grid = function (element, options) {
         this.$element = $(element);
         var colSpan = this._getColSpan(this.$element);
+        var rowType = this.$element.data('type');
         var itemsPerRow = parseInt(this.$element.data('items'));
         if (isNaN(itemsPerRow)) itemsPerRow = 12;
 
-        this.options = $.extend({ itemsPerRow, colSpan }, options);
+        this.options = $.extend({ rowType, itemsPerRow, colSpan }, options);
         this.layout();
     };
 
@@ -30,11 +31,13 @@
         },
         _layout_column: function ($target) {
             var $el = this.$element;
+            var rowType = this.options.rowType;
             var itemsPerRow = this.options.itemsPerRow;
             var isLabel = false;
             var $groupCell = null;
             var that = this;
             var $div = $('<div class="row g-3"></div>');
+            if (rowType === "inline") $div.addClass('form-inline');
 
             $el.children().each(function (index, ele) {
                 var $ele = $(ele);