Перемещение панели поиска в определенное место в Bootstrap 3

Question

У меня есть панель поиска, которая отображается в центре страницы. Я хотел бы переместить его на 1/4 пути. Как мне это достичь? Код ниже.

Update:

Использование инструментов разработчика в Chrome, я могу заставить его работать временно, используя следующие шаги:

1. Осмотрите элемент, чтобы получить «Инструменты разработчика»
2. Uncheck «дисплей : table-cell; " in .intro .intro-body
3. Нажмите «element.style»
4. Тип «margin-top: 300px;»

Теперь я могу поиграть с позицией панели поиска. Однако, когда я обновляю браузер, все потеряно!

Спасибо!

<!-- Intro Header --> 
    <header class="intro"> 
     <div class="intro-body"> 
      <div class="container"> 
       <div class="row"> 
        <div class="col-md-8 col-md-offset-2"> 
         </form> 
         <form action="/predict" style="width: 500px; margin: 0.3em 2em;" method='POST'> 
         <div class="input-group"> 
          <input type="text" name="user_input" class="form-control" placeholder="Search Indie Games"> 
          <div class="input-group-btn"> 
           <button type="submit" class="btn btn-primary">Recommend</button> 
          </div> 
         </div> 
        </form> 
        </div> 
       </div> 
      </div> 
     </div> 
    </header> 

Соответствующий CSS файл можно найти здесь:

https://dl.dropboxusercontent.com/u/23725837/bootstrap.css

Вот как все это выглядит следующим образом:

Обычай CSS здесь:

/*! * Начать бутстрап - Grayscale Bootstrap Theme (http://startbootstrap.com) * Код, лицензированный по лицензии Apache v2.0. * Подробнее см. http://www.apache.org/licenses/LICENSE-2.0. */

> body { 
>  width: 100%; 
>  height: 100%; 
>  font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif; 
>  color: #fff; 
>  background-color: #000; } 
> 
> html { 
>  width: 100%; 
>  height: 100%; } 
> 
> h1, h2, h3, h4, h5, h6 { 
>  margin: 0 0 35px; 
>  text-transform: uppercase; 
>  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 
>  font-weight: 700; 
>  letter-spacing: 1px; } 
> 
> p { 
>  margin: 0 0 25px; 
>  font-size: 18px; 
>  line-height: 1.5; } 
> 
> @media(min-width:768px) { 
>  p { 
>   margin: 0 0 35px; 
>   font-size: 20px; 
>   line-height: 1.6; 
>  } } 
> 
> a { 
>  color: #42dca3; 
>  -webkit-transition: all .2s ease-in-out; 
>  -moz-transition: all .2s ease-in-out; 
>  transition: all .2s ease-in-out; } 
> 
> a:hover, a:focus { 
>  text-decoration: none; 
>  color: #1d9b6c; } 
> 
> .light { 
>  font-weight: 400; } 
> 
> .navbar-custom { 
>  margin-bottom: 0; 
>  border-bottom: 1px solid rgba(255,255,255,.3); 
>  text-transform: uppercase; 
>  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 
>  background-color: #000; } 
> 
> .navbar-custom .navbar-brand { 
>  font-weight: 700; } 
> 
> .navbar-custom .navbar-brand:focus { 
>  outline: 0; } 
> 
> .navbar-custom .navbar-brand .navbar-toggle { 
>  padding: 4px 6px; 
>  font-size: 16px; 
>  color: #fff; } 
> 
> .navbar-custom .navbar-brand .navbar-toggle:focus, .navbar-custom 
> .navbar-brand .navbar-toggle:active { 
>  outline: 0; } 
> 
> .navbar-custom a { 
>  color: #fff; } 
> 
> .navbar-custom .nav li a { 
>  -webkit-transition: background .3s ease-in-out; 
>  -moz-transition: background .3s ease-in-out; 
>  transition: background .3s ease-in-out; } 
> 
> .navbar-custom .nav li a:hover { 
>  outline: 0; 
>  color: rgba(255,255,255,.8); 
>  background-color: transparent; } 
> 
> .navbar-custom .nav li a:focus, .navbar-custom .nav li a:active { 
>  outline: 0; 
>  background-color: transparent; } 
> 
> .navbar-custom .nav li.active { 
>  outline: 0; } 
> 
> .navbar-custom .nav li.active a { 
>  background-color: rgba(255,255,255,.3); } 
> 
> .navbar-custom .nav li.active a:hover { 
>  color: #fff; } 
> 
> @media(min-width:768px) { 
>  .navbar-custom { 
>   padding: 20px 0; 
>   border-bottom: 0; 
>   letter-spacing: 1px; 
>   background: 0 0; 
>   -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; 
>   -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; 
>   transition: background .5s ease-in-out,padding .5s ease-in-out; 
>  } 
> 
>  .navbar-custom.top-nav-collapse { 
>   padding: 0; 
>   border-bottom: 1px solid rgba(255,255,255,.3); 
>   background: #000; 
>  } } 
> 
> .intro { 
>  display: table; 
>  width: 100%; 
>  height: auto; 
>  padding: 100px 0; 
>  text-align: center; 
>  color: #fff; 
>  background: url(../img/intro-bg.jpg) no-repeat bottom center scroll; 
>  background-color: #000; 
>  -webkit-background-size: cover; 
>  -moz-background-size: cover; 
>  background-size: cover; 
>  -o-background-size: cover; } 
> 
> .intro .intro-body { 
>  display: table-cell; 
>  vertical-align: middle; } 
> 
> .intro .intro-body .brand-heading { 
>  font-size: 40px; } 
> 
> .intro .intro-body .intro-text { 
>  font-size: 18px; } 
> 
> @media(min-width:768px) { 
>  .intro { 
>   height: 100%; 
>   padding: 0; 
>  } 
> 
>  .intro .intro-body .brand-heading { 
>   font-size: 80px; 
>  } 
> 
>  .intro .intro-body .intro-text { 
>   font-size: 26px; 
>  } } 
> 
> .btn-circle { 
>  width: 70px; 
>  height: 70px; 
>  margin-top: 15px; 
>  padding: 7px 16px; 
>  border: 2px solid #fff; 
>  border-radius: 100%!important; 
>  font-size: 40px; 
>  color: #fff; 
>  background: 0 0; 
>  -webkit-transition: background .3s ease-in-out; 
>  -moz-transition: background .3s ease-in-out; 
>  transition: background .3s ease-in-out; } 
> 
> .btn-circle:hover, .btn-circle:focus { 
>  outline: 0; 
>  color: #fff; 
>  background: rgba(255,255,255,.1); } 
> 
> .btn-circle i.animated { 
>  -webkit-transition-property: -webkit-transform; 
>  -webkit-transition-duration: 1s; 
>  -moz-transition-property: -moz-transform; 
>  -moz-transition-duration: 1s; } 
> 
> .btn-circle:hover i.animated { 
>  -webkit-animation-name: pulse; 
>  -moz-animation-name: pulse; 
>  -webkit-animation-duration: 1.5s; 
>  -moz-animation-duration: 1.5s; 
>  -webkit-animation-iteration-count: infinite; 
>  -moz-animation-iteration-count: infinite; 
>  -webkit-animation-timing-function: linear; 
>  -moz-animation-timing-function: linear; } 
> 
> @-webkit-keyframes pulse {  
>  0% { 
>   -webkit-transform: scale(1); 
>   transform: scale(1); 
>  } 
> 
>  50% { 
>   -webkit-transform: scale(1.2); 
>   transform: scale(1.2); 
>  } 
> 
>  100% { 
>   -webkit-transform: scale(1); 
>   transform: scale(1); 
>  } } 
> 
> @-moz-keyframes pulse {  
>  0% { 
>   -moz-transform: scale(1); 
>   transform: scale(1); 
>  } 
> 
>  50% { 
>   -moz-transform: scale(1.2); 
>   transform: scale(1.2); 
>  } 
> 
>  100% { 
>   -moz-transform: scale(1); 
>   transform: scale(1); 
>  } } 
> 
> .content-section { 
>  padding-top: 100px; } 
> 
> .download-section { 
>  width: 100%; 
>  padding: 50px 0; 
>  color: #fff; 
>  background: url(../img/downloads-bg.jpg) no-repeat center center scroll; 
>  background-color: #000; 
>  -webkit-background-size: cover; 
>  -moz-background-size: cover; 
>  background-size: cover; 
>  -o-background-size: cover; } 
> 
> #map { 
>  width: 100%; 
>  height: 200px; 
>  margin-top: 100px; } 
> 
> @media(min-width:767px) { 
>  .content-section { 
>   padding-top: 250px; 
>  } 
> 
>  .download-section { 
>   padding: 100px 0; 
>  } 
> 
>  #map { 
>   height: 400px; 
>   margin-top: 250px; 
>  } } 
> 
> .btn { 
>  border-radius: 0; 
>  text-transform: uppercase; 
>  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; 
>  font-weight: 400; 
>  -webkit-transition: all .3s ease-in-out; 
>  -moz-transition: all .3s ease-in-out; 
>  transition: all .3s ease-in-out; } 
> 
> .btn-default { 
>  border: 1px solid #42dca3; 
>  color: #42dca3; 
>  background-color: transparent; } 
> 
> .btn-default:hover, .btn-default:focus { 
>  border: 1px solid #42dca3; 
>  outline: 0; 
>  color: #000; 
>  background-color: #42dca3; } 
> 
> ul.banner-social-buttons { 
>  margin-top: 0; } 
> 
> @media(max-width:1199px) { 
>  ul.banner-social-buttons { 
>   margin-top: 15px; 
>  } } 
> 
> @media(max-width:767px) { 
>  ul.banner-social-buttons li { 
>   display: block; 
>   margin-bottom: 20px; 
>   padding: 0; 
>  } 
> 
>  ul.banner-social-buttons li:last-child { 
>   margin-bottom: 0; 
>  } } 
> 
> footer { 
>  padding: 50px 0; } 
> 
> footer p { 
>  margin: 0; } 
> 
> ::-moz-selection { 
>  text-shadow: none; 
>  background: #fcfcfc; 
>  background: rgba(255,255,255,.2); } 
> 
> ::selection { 
>  text-shadow: none; 
>  background: #fcfcfc; 
>  background: rgba(255,255,255,.2); } 
> 
> img::selection { 
>  background: 0 0; } 
> 
> img::-moz-selection { 
>  background: 0 0; } 
> 
> body { 
>  webkit-tap-highlight-color: rgba(255,255,255,.2); } 

Answer 1

Предполагая, что вы загрузили файл пользовательского CSS (для темы Grayscale Bootstrap), вы можете изменить .intro .intro-body запись в:

.intro .intro-body { 
    display: table-cell; 
    vertical-align: middle; 
    margin-top: 300px; /* adjust your value here as desired */ 
} 

Если вы не сделали (и вы ссылаетесь тема в другом месте, например CDN), вы можете создать свой собственный CSS-файл только с этой записью (как указано выше) и включить его на свой сайт после пользовательский файл CSS (эффективно, переопределяя значение темы)