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

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

11.06.2015, 21:49. Просмотров 299. Ответов 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>

http://www.cyberforum.ru/html/thread2248877.html
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.06.2015, 21:49
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Bootstrap не получается сверстать один момент (HTML, CSS):

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

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

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

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

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

2
Shakalaka
Эксперт HTML/CSS
643 / 547 / 322
Регистрация: 27.01.2015
Сообщений: 1,373
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 / 17
Регистрация: 08.08.2014
Сообщений: 162
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; ...

Не получается сверстать меню, а именно при прокрутке оно уменьшалось
Мучаюсь не первый день, не получается сверстать меню, а именно при прокрутке...

Не получается сделать вот такой макет. Не могу сверстать. Всё внутри!
Вот, есть такой макет: цифры 1 и 2 показывают два разных фона. Можно сделать...


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

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

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