如何使用 bootstrap、razor 可重用组件和样式将 parent 组件元素与 child 组件元素对齐？

Question

刚刚学习 Blazor 和 razor 页面。我正在使用 bootstrap 来设计我的页面。我想知道如何处理这种情况：

Parent 引用 child 组件。 Child 组件使用标签和 select 列表框。使用 bootstrap 我这样设置组件的样式：

<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 中，如果我在 child 组件后面添加任何内联内容，child 组件的样式就会被破坏。如果我想添加与组件内联的消息怎么办。那可以吗？我怎样才能做到这一点？这里有一些屏幕截图。

这里尝试添加 'Message' 与组件内联： Parent 的 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>

结果图片：

因此，当 parent 中使用 bootstrap 网格时，Child 组件似乎占据了整条线并被压扁。我该怎么做才能解决这个问题？我真的不希望我的可重用代码占满整行。我确定这是我缺乏经验，但这就是我寻求帮助的原因。

非常感谢！

Answer 1

假设您使用的是 Boottrap 4.0 及更高版本，这可能就是您要找的 (working representation)。

<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>

如何使用 bootstrap、razor 可重用组件和样式将 parent 组件元素与 child 组件元素对齐？

How to align parent component elements with child component elements using bootstrap, razor reusable components and styling?

css

twitter-bootstrap

blazor-server-side

razor-components