Как разместить текст в загрузочном буфере Jumbotron-Twitter

Question

Я не могу поместить свой текст на top в jumbotron.

Вот мой код,

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<div class="jumbotron" style="text-align:center; background-image: url(img/propdev.jpg); background-size: cover; height: 30%;"> 
 
    <div class="container"> 
 
    <h2 id="prop_dev"> Are You a Property Developer?</h2> 
 
    <div id="raise" class="btn-group btn-group-lg" role="group"> 
 
     <button type="button" class="btn btn-primary">Raise Funding</button> 
 
    </div> 
 
    </div> 
 
</div>

Вот выход, Output

мне нужно сделать текст и кнопку на верхней части изображения

Answer 1

Я добавил padding-top:0px в свой встроенный стиль к DIV, который вы дали класс «JumboTron»

Теперь расстояние, на которое он имеет от вершины является заполнение класса контейнер, который находится внутри jumbotron. Если вы хотите удалить это тоже, добавьте padding-top:0px; к этому.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<div class="jumbotron" style="text-align:center; background-image: url(img/propdev.jpg); background-size: cover; height: 30%; padding-top:0px;"> 
 
    <div class="container" style="margin-top:0px !important;"> 
 
    <h2 id="prop_dev"> Are You a Property Developer?</h2> 
 
    <div id="raise" class="btn-group btn-group-lg" role="group"> 
 
     <button type="button" class="btn btn-primary">Raise Funding</button> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Добавить/удалить отступы от jumbotron до положения по вертикали

div.jumbotron{ 
 
    padding-top:60px; 
 
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/> 
 
<div class="jumbotron" style="text-align:center; background-image: url(img/propdev.jpg); background-size: cover; height: 30%;"> 
 
    <div class="container"> 
 
    <h2 id="prop_dev"> Are You a Property Developer?</h2> 
 
    <div id="raise" class="btn-group btn-group-lg" role="group"> 
 
     <button type="button" class="btn btn-primary">Raise Funding</button> 
 
    </div> 
 
    </div> 
 
</div>