css - CSS Flexbox没有将文本框与按钮对齐？

Question

尝试使用 SCSS 学习一些 flexbox 并将其应用于带有一些 Bootstrap 4 的页面。我尝试了几种组合，但无法让 texbox 和按钮水平对齐。

这是我正在尝试的 SCSS 和 HTML，但文本框和按钮堆叠在彼此之上。

<div class="impersonate__conatiner">
    <div class="impersonate__item">
        @Html.TextBoxFor(m => m.ImpersonateUserId, new { @class = "form-control impersonate__item", @placeholder = "Employee ID", @maxlength = "8", autofocus = "autofocus" })
        <button type="submit" class="btn btn-secondary">Impersonate</button>
    </div>        
</div>


.impersonate{
    &__container{
        display: flex;
    }

    &__item{
        flex: 1 1 auto;
    }
}

如果我在 Code Pen 中放入类似的东西，它似乎可以工作。这就是我在 Code Pen 中所拥有的。

<div class="impersonate__conatiner">
    <div class="impersonate__item">
       <input id="search" type="search" placeholder="text"/>
        <button type="submit" class="btn btn-secondary">Impersonate</button>
    </div>        
</div>

.impersonate__container{
        display: flex;
    }

.impersonate__item{
  flex: 1 1 auto;
}

任何建议，所以我不必求助于桌子。

标签： cssasp.netflexboxbootstrap-4