центр Bootstrap полевая форма-группа вход и сделать его меньше

Question

я в настоящее время пытается реализовать проект, который вы видите ниже:

Все работает на размер поля ввода и кнопки, за исключением , Я использую Boostrap.

HTML:

<div className='jumbotron text-center'> 
    <div className='container'> 
     <h1 id='hero-questions-h1'>What’s your name?</h1> 
    </div> 

    <div className='container'> 
     <div class="col-sm-4 text-center"> 
     <div className="form-group input-group-lg"> 
      <input type="text" className="form-control"></input> 
     </div> 
     <button type="button" id="continue-btn" className="btn btn-success btn-block">Continue</button> 
     </div> 
    </div> 

     <div className='container'> 
     <h2 id='tip'> 
      Tip! You will get motivational playlists, stories, posters and much more 
     </h2> 
     </div> 

    <footer className="footer"> 
     <div className="container"> 
     <p id="social-proof" className="text-center">“Must have for every ambitious athlete!”</p> 
     <p id="social-proof-tagline" className="text-center">Anders Hasselstrøm, Deca Ironman (10x)</p> 
     </div> 
    </footer> 
    </div> 

CSS:

.jumbotron { 
    height: 100vh; 
    margin-bottom: 0px !important; 
    background-image: url("bg-hero-v2.png"); 
    background-size: cover; 
} 

#hero-h1 { 
    color: white; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 700; 
    font-size: 60px; 
    padding-top: 10%; 
} 

#hero-h2 { 
    color: #ECECEC; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 300; 
    font-size: 20px; 
    margin-top: 30px; 
    line-height: 40px; 
    padding-bottom: 40px; 
} 

#hero-questions-h1 { 
    color: white; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 700; 
    font-size: 60px; 
    padding-top: 10%; 
    padding-bottom: 30px; 
} 

.btn-success { 
    background-color: #66B878 !important; 
} 

.form-control { 
    background-color: transparent !important; 
    color: white !important; 
} 

#signup-btn { 
    padding-left: 40px; 
    padding-right: 40px; 
    padding-top: 15px; 
    padding-bottom: 15px; 
} 

#continue-btn { 
    height: 60px; 
    font-size: 18px; 
} 

#social-proof { 
    color: white; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 500; 
    font-size: 18px; 
    font-style: italic; 
} 

#social-proof-tagline { 
    color: white; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 100; 
    font-size: 16px; 
} 

#tip { 
    color: #ECECEC; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 300; 
    font-size: 16px; 
    margin-top: 30px; 
} 

.footer { 
    padding-top: 20px; 
    padding-bottom: 20px; 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    background-color: black; 
    opacity: 0.6; 

} 

Как вы можете видеть, что мой текущая реализация выглядит следующим образом:

Answer 1

DOM элементы используют class вместо className к выделить CSS c (возможно, это может смутить свойство JS .className). Чтобы расположить поля, как вы хотите, я хотел бы предложить, воспользовавшись бутстраповской сетка col-x-offset-x options расположить столбец смещения с левой стороны .row

Для правильного позиционирования, не забудьте поместить .row элемент вокруг колонны, и между .container. Кроме того, input элементы самозакрывания (то есть. Вы не нуждаетесь в задней </input>)

HTML

<div class='jumbotron text-center'> 
    <div class='container'> 
     <h1 id='hero-questions-h1'>What’s your name?</h1> 
    </div> 

    <div class='container'> 
     <div class="row"> 
      <div class="col-sm-offset-3 col-sm-6 text-center"> 
       <div class="form-group input-group-lg"> 
        <input type="text" class="form-control" /> 
       </div> 
       <button type="button" id="continue-btn" class="btn btn-success btn-block">Continue</button> 
      </div> 
     </div> 
    </div> 

    <div class='container'> 
     <h2 id='tip'> 
      Tip! You will get motivational playlists, stories, posters and much more 
     </h2> 
    </div> 

    <footer class="footer"> 
     <div class="container"> 
      <p id="social-proof" class="text-center">“Must have for every ambitious athlete!”</p> 
      <p id="social-proof-tagline" class="text-center">Anders Hasselstrøm, Deca Ironman (10x)</p> 
     </div> 
    </footer> 
</div> 

JSFIDDLE

Answer 2

Я просто работал с начальной загрузки, и теперь я имел та же проблема. На месте:

<div className='container'> 
    <div class="col-sm-4 text-center"> 
    <div className="form-group input-group-lg"> 
     <input type="text" className="form-control"></input> 
    </div> 
    <button type="button" id="continue-btn" className="btn btn-success btn-block">Continue</button> 
    </div> 
</div> 

Попробуйте это:

<div className='container'> 
<div class="col-sm-4"> 
    &nbsp; 
</div> 
<div class="col-sm-4 text-center"> 
    <div className="form-group input-group-lg"> 
     <input type="text" className="form-control"></input> 
    </div> 
    <button type="button" id="continue-btn" className="btn btn-success btn-block">Continue</button> 
</div> 
<div class="col-sm-4"> 
    &nbsp; 
</div> 

Дополнительный класс с col-sm-4 будет структурировать дивы в правильном порядке.

<div class="col-sm-4"> 
    &nbsp; 
</div> 

  не является обязательным, но я обнаружил, что он помог мне.