输入不保留在使用引导程序的父容器中

Question

我正试图做的是创建一个包含头和输入字段的div容器。我已经完成了这一点，但出于某种原因，我无法获得输入，以生活在我的父容器内。理想情况下，我会喜欢它根据其容器的大小进行缩放。我希望标题和输入始终是容器内的容器。所以这两个元素应该总是背后有一个灰色的背景。我有一个jsFiddle here。我会很感激任何帮助。谢谢！

<div class="front-page-container-search"> 
    <h3>This is the text I will have in my bubble. Yet when I shrink my screen the input moves down. </h3> 
    <form> 
     <div class="input-group"> 
     <input type="text" class="form-control" placeholder="Find artist..."> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="submit"> 
      <span class="glyphicon glyphicon-search"></span> 
      </button> 
     </span> 
     </div> 
    </form> 
    </div> 



.front-page-container-search { 
    position: absolute; 
    left: 10%; 
    right: 10%; 
    height: 100px; 
    color: white; 
    text-align: center; 
    top: 100px; 
    background-color: rgba(0, 0, 0, 0.6); 
    border: 1px solid black; 
    border-radius: 18PX; 
    padding: 15px; 
} 

Answer 1

在这种情况下，所有你需要做的是去除height，让容器取的内容默认高度。指定固定高度不会提供响应性，并且当屏幕尺寸较小或调整大小时，内容将被强制占据有限的高度。让布局引擎根据内容计算高度，确保所有内容都在父级内呈现。

.front-page-container-search { 
 
    position: absolute; 
 
    left: 10%; 
 
    right: 10%; 
 
    color: white; 
 
    text-align: center; 
 
    top: 100px; 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
    border: 1px solid black; 
 
    border-radius: 18PX; 
 
    padding: 15px; 
 
    
 
}

<div class="front-page-container-search"> 
 
    <h3>This is the text I will have in my bubble. Yet when I shrink my 
 
     screen the input moves down. </h3> 
 
    <form> 
 
     <div class="input-group myform"> 
 
     <input type="text" class="form-control" placeholder="Find artist..."> 
 
     <span class="input-group-btn"> 
 
      <button class="btn btn-default" type="submit"> 
 
      <span class="glyphicon glyphicon-search">Search</span> 
 
      </button> 
 
     </span> 
 
     </div> 
 
    </form> 
 
    </div>

Answer 2

我更新了你的小提琴here。

我的变化：

1. 删除在CSS强制高度.front-page-container-search
2. 新增div.clearfix你的风格的容器内。 （这可能会或可能不会是必要的。）