!2345 fix(#I4RULJ): update margin-left make dropdown align center

* doc: 更新示例
* style: 微调样式居中对齐
* Merge branch 'main' into dev-widget
* chore: 更新  Widget 样式
* doc: 更新文档修复丢失的 Header 内容

src/BootstrapBlazor.Shared/Samples/DropdownWidgets.razor

@@ -6,7 +6,7 @@
 <h4>@Localizer["SubTitle"]</h4>
 
 <DemoBlock Title="@Localizer["BasicUsageTitle"]" Introduction="@Localizer["BasicUsageIntro"]" Name="Normal">
-    <div class="d-flex align-items-center" style="height: 40px; background-color: #6c757d;">
+    <div style="background-color: #6c757d;">
         <DropdownWidget>
             <DropdownWidgetItem Icon="fa fa-envelope-o" BadgeNumber="4">
                 <HeaderTemplate>
@@ -35,7 +35,7 @@
             </DropdownWidgetItem>
             <DropdownWidgetItem Icon="fa fa-bell-o" BadgeNumber="10" HeaderColor="Color.Success" BadgeColor="Color.Warning">
                 <HeaderTemplate>
-                    <span></span>
+                    <span>@Localizer["BasicUsageNotify"]</span>
                 </HeaderTemplate>
                 <BodyTemplate>
                     @for (var index = 0; index < 10; index++)

src/BootstrapBlazor/Components/DropdownWidget/DropdownWidget.css

@@ -1,7 +1,8 @@
 .widget .dropdown-toggle {
     color: #fff;
-    padding: 14px 15px;
+    padding: 10px 16px;
     position: relative;
+    display: inline-block;
 }
 
     .widget .dropdown-toggle:after {
@@ -17,7 +18,7 @@
 .widget .dropdown-menu {
     overflow: visible;
     width: 235px;
-    margin-left: -96px !important;
+    margin-left: -94px !important;
     padding: 0;
     max-height: none;
     border: none;