Макет границы с бутстрапом

Можно ли создать макет границы с помощью начальной загрузки, которая центрирует метки правой и левой границ, удерживает нижнюю часть внизу страницы и заполняет содержимое всем пространством, оставшимся в центре?

Новичок в начальной загрузке, но даже с помощью Google я просто придумал это:

div class="container">
<div class="row">
    <div class="col-xs-1">
        <div class="left-box">
            <div class="turn-left">left</div>
        </div>
    </div>
    <div class="col-xs-10">
        <div class="row">
            <div class="col-xs-12">
                <div class="top-box">top</div>
            </div>
            <div class="col-xs-12">
                <div class="content-box">content</div>
            </div>
            <div class="col-xs-12">
                <div class="bottom-box">bottom</div>
            </div>
        </div>
    </div>
    <div class="col-xs-1">
        <div class="right-box">
            <div class="turn-right">right</div>
        </div>
    </div>
</div>

https://jsfiddle.net/fbtw6/352

Результат не очень убедительный - что я делаю не так?

1 ответ

Решение

Видите, это работает для вас.

<div class="container">
    <div class="page-header">
        <div class="row">
            <div class="col-xs-1">
                <div class="left-box">
                    <div class="turn-left">left</div>
                </div>
            </div>
            <div class="col-xs-10">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="top-box">top</div>
                    </div>
                    <div class="col-xs-12">
                        <div class="content-box">content</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-1">
                <div class="right-box">
                    <div class="turn-right">right</div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="footer">
    <div class="container">
        <p>sticky footer</p>
    </div>
</footer>

Я использовал этот пример для сборки.

Как это лучше?

Другие вопросы по тегам