Как обернуть элементы формы в теге div (с фоновым цветом), используя twitter bootstrap и CSS

Я новичок в twitter bootstrap. Я пытался включить все элементы формы в тег div и заполнить его каким-то фоновым цветом в CSS и правильно выровнять его, и это работает нормально, но я теряю отзывчивый характер тега div вместе с элементами формы. Кто-нибудь может мне с этим помочь?Как обернуть элементы формы в теге div (с фоновым цветом), используя twitter bootstrap и CSS

Следующая страница моего index.html.

<body> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12 col-xs-12" id="bg"> 
     <div class="row"> 
      <div class="col-md-9 col-xs-9 " id="main"> 
       <form class="form-horizontal" name="submit" role="form" action="create_leads.php" method="post"> 
        <div class="form-group"> 
         <label for="lname"> Name:</label> 
         <input type="text" name="lname" class="form-control" id="focusedInput" placeholder="Please enter your name" required /> 
        </div> 
        <div class="form-group"> 
         <label for="mobile"> phone-number: </label> 
         <input type="text" name="mobile" class="form-control" placeholder="please enter your phone number" required/> 
        </div> 
       </form> 
      </div> 
     </div> 

    </div> 
</div> 
</div> 
</body>

Ниже мой CSS код

body{ 

     background: gray url('../images/bg8.jpg') no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-position: fixed; 
     background-size: 100% auto; 

} 

#main { 
     position:absolute; 
     border: 5px solid gray; 
     background-color: gray; 
     opacity: 0.8; 
     margin: 200px 200px 200px 200px; 
    }

источник

2015-01-09 Yash

На '# main' удалите все поля. Это будет действительно беспорядок с адаптивным бутстрапом кода на месте. –

спасибо, что это сработало! но есть ли другой альтернативный способ сбить div и все элементы формы в центр страницы? – Yash

«выровняйте его правильно», что вы имеете в виду? горизонтально выровнять #main до #bg? – tmg

Если вы пытаетесь центрировать вход в самом центре страницы здесь простой пример того, как сделать Это.

Fiddle

Вам не нужно вставлять в столбец внутри вложенной строки, а просто использовать первый. Вы можете возиться с шириной col и col-md-offset, чтобы получить ширину вашего окна так, как вы этого хотите.

источник

2015-01-09 14:23:30

Спасибо за ваш ответ, он отлично работает для меня, но мне нужен еще один совет. когда я размещаю свой логотип на верхней части страницы; для полноразмерного окна он отлично работает, но когда я переустанавливаю окно на малую ширину планшета и телефона, элементы формы перекрываются с логотипом. Можете ли вы мне помочь? Вот код в скрипке; http://jsfiddle.net/dasariyeshwant/rw57ycuy/ – Yash

Я уже немного почистил его для вас. У вас была встроенная строка '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '', которая вам действительно не нужна. [Фидл] (http://jsfiddle.net/809j5130/) –

Если я понимаю, что вы просите, вы пытаетесь центрировать форму в середине страницы. Вы можете использовать технику «преобразование». Не забудьте добавить префиксы ('-webkit- и т. Д.').

#main { 
    position: absolute; 
    transform: translate(-50%, -50%); 
    top: 50%; 
    left: 50%; 
}

Вы хотели бы избавиться от всех Див-х, окружающих элемент «#main», так как самозагрузки не будет действительно заботиться о «контейнер» и «строки» и т.д., используя абсолютное позиционирование и больше ничего находится на странице. «Трансформировать» CSS буквально возьмет «#main» и поместит его в центр страницы, вроде как модальный.

<body> 
    <div id="main" class="col-md-9"> 
     // your form 
    </div> 
</body>

Кроме того, поскольку вы новичок в начальной загрузки, если у вас есть класс «Col-мкр-9», нет никаких причин, чтобы добавить «Col-хз-9», так как по ширине, что видовой экран не может использовать ширину «col-md-9». Вы можете оставить его только как «col-md-9» и удалить «col-xs-9».

Примечание: «преобразование» CSS работает только для современных браузеров.

Edit:

Вы на самом деле нужен «ряд» и контейнерный класс применяется, так как вы имеете плавающие элементы внутри элемента «#main», и поэтому он не будет ясно для заполнения, поля и т.д. класс «контейнер» даст вам, что отступы по краям, что вам нужно для мобильных просмотров

<body> 
    <div class="container"> 
     <div class="row"> 
      <div id="main" class="col-md-9"> 
       // your form 
      </div> 
     </div> 
    </div> 
</body>

источник

2015-01-09 13:03:39

Как обернуть элементы формы в теге div (с фоновым цветом), используя twitter bootstrap и CSS

ответ

Смежные вопросы