具有angular2布局问题的Bootstrap4网格

Question

我在angular2项目中实现了bootstrap4，并创建了如下的网格布局结构。

App.Component.html

<div class="container">
<div class="row">
    <div class="col-md-12">
        <app-navigationbar></app-navigationbar>
    </div>
    <div class="col-md-12">
        <app-search></app-search>
        <app-product></app-product>
    </div>
</div>

Navigation.Component.html

 <nav class="navbar navbar-toggleable-md navbar-inverse bg-primary">
      <!-- Brand -->
      <a class="navbar-brand" href="#">Logo</a>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </nav>

Search.Component.html

 <div class="col-md-3">
  <div class="row line_height">
  <label>Product Title:</label>
</div>
<div class="row line_height">
  <input type="text" class="form-control" placeholder="Product Title">
</div>
<div class="row line_height">
  <label>Product Price:</label>
</div>
<div class="row line_height">
  <input type="text" class="form-control" placeholder="Product Price">
</div>
<div class="row line_height">
  <label>Product Category:</label>
</div>
<div class="row line_height">

  <input type="text" class="form-control" placeholder="Product Category">
</div>
<div class="row line_height">
  <input type="submit" id="btnSubmit" class="btn-primary form-control" value="Search" />
</div>
</div>

Product.Component.html

<div class="col-md-3" *ngFor="let product of _products">
  <img src="./Content/Images/download.jpg" />
  <div>
    <label class="padding_left">First Product</label>
    <label class="padding_right">24.99</label>
  </div>
  <p>
    Test Description
  </p>
</div>

获得以下输出

为什么搜索组件没有堆叠在容器的正确空间？

请帮我解决这个问题

注意：使用Bootstrap4 aplha6 css

Answer 1

尝试

<div class="col-md-12">
    **<div class="row">**
        <app-search></app-search>
        <app-product></app-product>
    **</div>**
</div>