css - 如何使用引导程序、剃须刀可重用组件和样式将父组件元素与子组件元素对齐？

Question

刚刚学习 Blazor 和 razor 页面。我正在使用引导程序来设置页面样式。我想知道如何处理这种情况：

Parent 引用一个子组件。Child 组件使用标签和选择列表框。使用引导程序，我对组件进行样式设置，如下所示：

<div class="row">
    <label for="@selectID" class="col-1 my-auto">Select a City:</label>
    <select ID="@selectID" class="form-control col-3" @onchange="OnSelectedCityChanged">
        @if (@CityList != null)
        {
            @foreach (var city in CityList)
            {
                <option value="@city">@city</option>
            }
        }
    </select>
</div>

这很好地对齐了 Child 组件中的元素。但是，在父组件中，如果我在子组件后面添加任何内联内容，则子组件的样式将被丢弃。如果我想在组件中添加一条消息怎么办。可以这样做吗？我怎样才能做到这一点？这是一些屏幕截图。

这里尝试添加与组件​​内联的“消息”：Parent's HTML：

<div class="row">
    <div class="col-4">
        <Cities @bind-SelectedCity="city" selectID="selCities" CityList=@cities></Cities>
    </div>
    <div class="col-1">Message</div>
</div>

结果的图像：

因此，当在父级中使用引导网格时，子级组件似乎占据了整条线并被挤压。我能做些什么来解决这个问题？我真的不希望我的可重用代码占用整行。我确定这是我缺乏经验，但这就是我寻求帮助的原因。

多谢！

Answer 1

假设您使用的是 Boottrap 4.0 及更高版本，可能这就是您正在寻找的（工作表示）。

<div class="d-flex">
  <div class="form-group">
    <div class="d-inline-flex">
      <label for="@selectID">Select a City:</label>
      <select ID="@selectID" class="form-control">
        @if (@CityList != null)
        {
            @foreach (var city in CityList)
            {
                <option value="@city">@city</option>
            }
        }
      </select>
    </div>
    <div>Message</div>
  </div>
</div>