Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
zmanz
2 / 2 / 0
Регистрация: 08.08.2014
Сообщений: 167
1

Bootstrap не получается сверстать один момент

11.06.2015, 21:49. Просмотров 811. Ответов 2
Метки нет (Все метки)

Здравствуйте, в общем такой момент, нужно сверстать сайт на bootstrap, у сайта 4 колонки

1 колонка уже чем три другие, в ней находится меню, а три остальные одинакового размера

Вот картинка http://prntscr.com/7ftu0m

В общем нужно чтобы левая колонка была фиксированная 245px, а три другие чтобы растягивались в зависимости от размера правого блока.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--Этот вариант не правильно работает-->
    <div class="container no-padding">
        <!--Левая колонка-->
        <div style="width:245px; float:left;">
            <div class="row">
                11111111111111
            </div>
        </div>
        <!--Три правые колонки-->
        <div style="width:955px; float:right;">
            <div class="row">
                <div class="col-xs-4">11111</div><!--Вторая колонка-->
                <div class="col-xs-4">22222</div><!--Третья колонка-->
                <div class="col-xs-4">33333</div><!--Четвертая колонка-->
            </div>
        </div>
    </div>
Добавлено через 17 минут
Вот что мне нужно, чтобы было понятней

http://prntscr.com/7fu4an

CSS
1
2
3
4
5
6
7
8
<div class="container">
            <div class="row">
                <div style="width:245px; float:left;">1 столбец шириной 245px</div>
                <div class="col-xs-3">2 столбец</div>
                <div class="col-xs-3">3 столбец</div>
                <div class="col-xs-3">4 столбец</div>
            </div>
        </div>
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.06.2015, 21:49
Ответы с готовыми решениями:

Как сверстать такой макет (bootstrap)?
вот так на десктопной версии как такой макет сверстать? (может где есть...

Не получается сверстать
Всем доброго дня. В приложении скрин, что у меня получилось. Но кое-что...

Не получается сверстать блок
Как сделать блок 5-ти угольным и поместить туда картинку?

Не получается сверстать сайт
Всем привет! Нужно быстренько сверстать сайт и возникли некоторые проблемы, в...

Не получается сверстать секцию
Здравствуйте. Верстаю свой первый шаблон на основе bootstrap. Так вышло, что не...

2
Shakalaka
Эксперт HTML/CSS
644 / 548 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
12.06.2015, 10:19 2
Лучший ответ Сообщение было отмечено zmanz как решение

Решение

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
        .container-fluid{max-width:1300px;}
</style>
<div class="container-fluid">
    <div style="float:left; width:245px; background: #0ff;">text<br />text<br />text<br />text<br />text<br />text<br />text<br /></div>
        <div class="container-fluid" style="margin-left: 245px;">
            <div class="row clearfix">
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background: #ccc;">text<br />text<br />text<br />text<br />text<br />text<br />text<br /></div>
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background: #ff0;">text<br />text<br />text<br />text<br />text<br />text<br />text<br /></div>
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" style="background: #00f;">text<br />text<br />text<br />text<br />text<br />text<br />text<br /></div>
            </div>
        </div>
 
</div>
И будет тебе счастье)
1
zmanz
2 / 2 / 0
Регистрация: 08.08.2014
Сообщений: 167
15.06.2015, 13:25  [ТС] 3
Спасибо большое, то что надо ))
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.06.2015, 13:25

Не получается сверстать меню
Всем доброго утра. Тренируюсь, верстаю макет, но никак не получается сверстать...

Не получается сверстать вертикальное выпадающее меню
Добрый день. Я заранее извиняюсь за глупый вопрос. Проблема вот в чем. Я...

Не получается сверстать поиск с помощью submit
Есть у меня вот такой header &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru