Twitter Bootstrap CSS static -плавное позиционирование формы

Я использую фреймворк Twitter Bootstrap, пытаясь получить такой макет:

Вот как это выглядит сейчас:

полноэкранный режим jsFiddle

jsFiddle

Ширина контейнера формы изменяется в зависимости от ширины браузера (CSS-медиа Twitter Bootstrap -запросов ). Поле значка -всегда имеет ширину 14 пикселей.

Я пробовал разные вещи, основанные на статической -ширине -боковой панели/жидкости -макетах CSS контента, чтобы попытаться заполнить ширину ввода текста.

Я думаю, что мой единственный вариант — это создавать свои собственные медиа-запросы CSS -, которые определяют абсолютную ширину для ввода текста.

    

        

            
Our Theme
            
lorem ipsum...
        
        

            

                
Contact Us
                
Send a message......lorem ipsum...
                

                    
                        
                        

                            
                                
                            
                        
                        

                            
                                
                            
                        
                        
                        Send message
                    
                
            
        
    

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');

body { padding: 10px }

.patch-well {
  color: #FFF;
  background: url('http://subtlepatterns.com/patterns/darkdenim3.png') repeat;
  padding: 20px;
  text-align: center;

  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;

  -moz-box-shadow: 0 0 5px #000;
  -webkit-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}

.input-prepend {

}

.input-prepend.add-on {

}

.input-prepend input {

}