2017-02-23 59 views
-1

Итак, у меня есть 5 элементов, которые я хочу разместить в другом месте на разных размерах экрана. на рабочих столах будет 3 в первом ряду, то 2 во второмBootstrap 5 элементов, разные расположения на разных устройствах

* * * 
* * 

затем на таблетки 2 - 2 - 1

* * 
* * 
* 

затем на мобильном телефоне каждый из них в строке

* 
* 
* 
* 
* 

Как я могу сделать планшет один? если я ставлю первые 3 в ряд, у меня будет следующий

* * 
* 
* * 
+0

Попробуйте использовать запросы '@ media' в ваших файлах CSS – Jer

+1

, пожалуйста, сообщите нам код html, который вы используете сейчас? нам нужно знать код, который поможет вам. –

+0

, если вы ставите пример кода, было бы проще помочь :) –

ответ

1

Это всегда помогает начать с мобильного первого в Bootstrap, так что вы можете достичь того, чего вы хотите, как это:

.row div { 
 
    text-align: center; 
 
} 
 

 
.col1 { 
 
    background-color: red; 
 
} 
 
.col2 { 
 
    background-color: blue; 
 
} 
 
.col3 { 
 
    background-color: green; 
 
} 
 
.col4 { 
 
    background-color: yellow; 
 
} 
 
.col5 { 
 
    background-color: orange; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="row"> 
 
    <div class="col1 col-xs-12 col-md-6 col-lg-4">COL1</div> 
 
    <div class="col2 col-xs-12 col-md-6 col-lg-4">COL2</div> 
 
    <div class="col3 col-xs-12 col-md-6 col-lg-4">COL3</div> 
 
    <div class="col4 col-xs-12 col-md-6">COL4</div> 
 
    <div class="col5 col-xs-12 col-lg-6">COL5</div> 
 
</div>

+0

Спасибо! это очень помогло –

0

Используйте код ниже:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    
 
    <div class="col-xs-12 col-sm-6 col-md-4" > 
 
     1st Column 
 
    </div> <!-- col --> 
 

 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     2nd Column 
 
    </div> <!-- col --> 
 
    
 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     3rd Column 
 
    </div> <!-- col --> 
 
    
 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     4th Column 
 
    </div> <!-- col --> 
 
    
 
    <div class="col-xs-12 col-sm-6 col-md-4"> 
 
     5th Column 
 
    </div> <!-- col --> 
 
    
 
    </div> <!-- row --> 
 
    </div> <!-- container -->

Надеюсь, это поможет.

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