Bootstrap grid style игнорирует смещение

Question

Я хочу создать div, подобный этому, который центрирован в центре основного div. Этот div должен иметь ширину около 500 пикселей. Это выглядит так:

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

<div class="center"> 
    <div class="row col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3"> 
     <a href="#" class="btn btn-block"> GET DATIALS</a> 
     <p class=" col-xs-3 col-sm-3 col-md-3 col-lg-3"></p> 
    </div> 
    <div class="row col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3"> 
     <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 line"> 
      Text 1 
     </div> 
     <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 line"> 
     Text 2 
     </div> 
     <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 "> 
     Text 3 
     </div> 
    </div> 

    </div> 

И CSS:

.line{ 
    border-right: 1px solid #ccc; 
} 
.delete{ 
    background-color: hsl(160, 0%, 18%) !important; 
    color: #fff !important; 
    border-radius: 0 !important; 
    height: 47px; 

} 

По некоторым причинам он не работает, и все отображается в той же строке и офсетные столбцы не будут приняты во внимание. Может кто-нибудь мне помочь?

Answer 1

Для того, чтобы сетка работала, вы должны обернуть ваш div внутри div контейнером class (см. bootstrap docs grid). Кроме того, bootstrap является мобильным первым, что означает, что если вы укажете заданный col-xs-*, этот class будет распространяться до более крупных классов столбцов, поэтому, если вам нужно одинаковое количество столбцов во всех xs, sm, md и lg, вам нужно указать xs.

Живая демонстрация:
http://www.bootply.com/QztQES4NTI

Markup

<div class="center text-center container"> 
<div class="row"> 
    <div class="col-xs-4 col-xs-offset-4 "> 
    <!-- I added btn-primary but feel free to remove it if not needed --> 
     <a href="#" class="btn btn-block btn-primary"> GET DATIALS</a> 
     <p class=" col-xs-3"></p> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-offset-4"> 
     <div class="col-xs-2 line"> 
      Text 1 
     </div> 
     <div class="col-xs-2 line"> 
      Text 2 
     </div> 
     <div class="col-xs-2 "> 
      Text 3 
     </div> 
    </div> 
</div> 

Answer 2

Я начал смотреть на свой код, и я в конечном итоге делает это и получил очень близко к тому, что вы хотели , Дело в бутстрапе заключается в следующем: у вас должен быть div для строки, а затем div для col. размер здесь - это HTML, например:

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-12 col-md-12 col-lg-12"> 
     <a href="#" class="btn btn-block">GET DETAILS</a> 
    </div> 
    <div class="row text-center text"> 
     <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 line"> 
      Text 1 
     </div> 
     <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 line"> 
      Text 2 
     </div> 
     <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 "> 
      Text 3 
     </div> 
    </div> 
    </div> 
</div>