Bootstrap - Page Division

Я только что начал использовать бутстрап. У меня есть готовая страница с верхним и нижним колонтитулом. Но я хочу разделить мой контейнер на левую и правую части.Bootstrap - Page Division

Layout

Что может быть бутстраповским способ сделать это? поэтому моя страница может быть достаточно гибкой на разных устройствах?

home.jsp

<!DOCTYPE html> 
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<html> 
<head> 
    <title>Bootstrap Home</title> 
    <link rel="stylesheet" type="text/css" href="<c:url value="/views/js/bootstrap/css/bootstrap.css"/>"> 
    <link rel="stylesheet" type="text/css" href="<c:url value="/views/css/home.css"/>"> 
    <script type="text/javascript" src="<c:url value="/views/js/jquery-2.1.1.min.js"/>"></script> 
    <script type="text/javascript" src="<c:url value="/views/js/bootstrap/js/bootstrap.js"/>"></script>  
    <script type="text/javascript"> 
    $(document).ready(function(){ 

    }); 
    </script> 
</head> 
<body> 
    <jsp:include page="includes/header.jsp"></jsp:include> 
    <div class="container" style="display: table; width: 100%;padding: 0px;"> 
     <p class="muted-text">This is container</p> 
    </div> 
    <jsp:include page="includes/footer.jsp"></jsp:include>  
</body> 
</html>

источник

2015-04-01 Priyank Thakkar

Bootstrap сетки является то, что вы ищете: http://getbootstrap.com/examples/grid/ – exoddus

Сумма всех столбцов 12, так что вы можете попробовать что-то вроде этого.

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4">Left col</div> 
    <div class="col-md-8">Right col</div> 
    </div> 
</div>

Вы можете комбинировать классы для создания более гибких макетов.

(мобильные устройства) 'XS'
'см' (маленькие устройства, такие как таблетки)
'MD' (ноутбуки, средний экран)
'LG' (большой экран)

Для получения дополнительной информации посетите: Bootstrap

источник

2015-04-01 10:07:31 Paul

Пробуйте этот код для работы на всех экранах.

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-4 col-md-4 col-lg-4 col-xs-4">Left col</div> 
    <div class="col-sm-8 col-md-8 col-lg-8 col-xs-8">Right col</div> 
    </div> 
</div>

col-sm для малого экрана col-md для среднего экрана col-lg для большого экрана col-xs для дополнительного небольшого экрана

источник

2015-04-01 10:09:25

Взгляните на http://getbootstrap.com/examples/grid

попробовать это:

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-4 col-md-4 col-lg-4 col-xs-4">LEFT</div> 
    <div class="col-sm-8 col-md-8 col-lg-8 col-xs-8">RIGHT</div> 
    </div> 
</div>

https://jsfiddle.net/DVE4f/375/

Другие примеры здесь: http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp

источник

2015-04-01 10:18:04 exoddus

Bootstrap - Page Division

ответ

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