background-color仅适用于bootstrap中div的一部分，当它应用于整个div时

Question

我在使用Bootstrap

使用以下html构建的网站中有一个表单

<div class="hotel-search side-menu blue-background ">
      <h2>Search</h2>
      <hr/>
      <br/>
     <form class="hotel-search-form">
        <div class="form-group  col-md-12">
          <label for='nationanlity'>Nationality</label>
          <select class="chosen form-control"  name="nationanlity" placeholder="Please select your nationality">
                <option value="">Select Nationality</option>
                <option value="...">...</option>
          </select>
        </div>
       <div class="form-group col-sm-6">   
          <select class="chosen form-control" id="country" name="country" placeholder="Please select your country">
                 <option value="">Select Country</option>
                 <option selected="selected" value="UAE">UAE</option>
           </select>
       </div>

       <div class="form-group col-sm-6">

           <select class="chosen form-control" id="city" name="city"     placeholder="Please select your city">
                   <option value="">Select City</option>        
           </select>
       </div>

      <div class="form-group  col-md-12">
           <label for="hotel">Hotel Name</label>
           <input type="text" class="form-control" id="hotel"     placeholder="Hotel Name">
          </div>
</form>

适用于此表单的唯一css是来自     .blue-background {         background-color：＃010118;     } CSS。我的问题是，这只会为表单的一部分设置背景颜色

这已经发生了几次，当我将.row添加到主div时，它工作正常，但这导致对齐变坏，任何人都可以向我解释为什么会发生这种情况？和可能的解决方案？感谢。

Answer 1

添加

display:table; 

到主窗体div似乎解决了问题，但我不知道为什么没有它就无法工作。

Answer 2

display: inline-block; also works.

此外，您忘记关闭表单和最后一个div，但这并不能解决问题。