Как создать вертикальный блок с кнопками в правом верхнем углу на bootstrap?

12
E
На сайте с 22.07.2016
Offline
25
893

Всем доброго времени суток, я новичек в этом вопросе, помогите пожалуйста с созданием блока с кнопками и информацией как на скриншоте.

Имею следующее


<div class="row">

<div class="col-md-4">LOGO</div> </div>

<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="nav navbar-nav m-auto">
<li class="nav-item"><a href="#main" class="nav-link">ГЛАВНАЯ</a></li>
<li class="nav-item"><a href="#barbers" class="nav-link">МАСТЕРА</a></li>
<li class="nav-item"><a href="#prices1" class="nav-link">ЦЕНЫ</a></li>
<li class="nav-item"><a href="#cosmetics" class="nav-link">КОСМЕТИКА</a></li>
<li class="nav-item"><a href="#contacts" class="nav-link">КОНТАКТЫ</a></li>
</ul>
<div class="row">
<div class="col-md-4 mr-auto">
<p data-scrollax="properties: { translateY: '30%', opacity: 1.6 }"><a href="#" class="btn btn-primary px-8 py-6 ms_booking">Записаться</a></p>
</div>
</div>
</div>

И как увеличить размер кнопки? игрался с параметрами px py получилось растянуть но не более, нужно как на скриншоте.

E
На сайте с 22.07.2016
Offline
25
#1

Помогите пожалуйста, 2-й день голову ломаю(

G
На сайте с 04.10.2010
Offline
98
#2

Походу о таблице стилей вы совсем не слышали?

Размещу ваши ссылки на СВЕРХжирных порталах с огромным трафиком ( https://kwork.ru/links/3852892/sverkhzhirnie-portaly-obshchey-tematiki ) Рейтинг хостингов 2020 (https://impossible-studio.com/рейтинг-хостингов-2020/)
S
На сайте с 13.10.2014
Offline
148
#3

Я бы это не бутстрапой делал, а руками. через флекс.

у bs очень жесткая 12-ти колоночная структура, поэтому при наличии хоть какой-то адаптивности всё это полетит к чертям.

Ну а если адаптивность не нужна, то делать несколько проще

кнопку просто стилями пропишите и всё

E
На сайте с 22.07.2016
Offline
25
#4
Gigabajt:
Походу о таблице стилей вы совсем не слышали?

Сделал через CSS, проблема теперь другая, при скролле страницы

все содержимое уходит вниз, а нужно оставить только кнопку "Записаться"

Добавляется класс scrolled пробовал дописать в ксс

.ftco-navbar-light.scrolled.awake.info {

display: none;
}

не помогло, в сам скрипт нужно лезть?

---------- Добавлено 15.11.2018 в 19:34 ----------

silicoid:
Я бы это не бутстрапой делал, а руками. через флекс.
у bs очень жесткая 12-ти колоночная структура, поэтому при наличии хоть какой-то адаптивности всё это полетит к чертям.
Ну а если адаптивность не нужна, то делать несколько проще
кнопку просто стилями пропишите и всё

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

D.iK.iJ
На сайте с 26.05.2013
Offline
178
#5
enerjze:
не помогло, в сам скрипт нужно лезть?

Все это такие вопросы, которые с сайтом можно решить за 5 минут - через инспектор стилей.

А без сайта - хоть час голову ломать.

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
E
На сайте с 22.07.2016
Offline
25
#6
DiKiJ:
Все это такие вопросы, которые с сайтом можно решить за 5 минут - через инспектор стилей.
А без сайта - хоть час голову ломать.

DiKiJ, Да, не подумал.

Вот

E
На сайте с 22.07.2016
Offline
25
#7

Ссылку поправил.

D.iK.iJ
На сайте с 26.05.2013
Offline
178
#8

Ну, если привязываться именно к scrolled, то как-то так:

.ftco-navbar-light.scrolled .container-fluid .info .main {
display: none;
}
.ftco-navbar-light.scrolled .container-fluid .info {
padding: 15px;
}

Ну и если учитывать, чтобы было на адаптиве нормально, то еще добавляем:

@media screen and (max-width: 991px) {
.ftco-navbar-light.scrolled .container-fluid .info {
top: 1px; padding: 0px; right: 70px;
}

.ftco-navbar-light.scrolled .container-fluid .info .btn {
padding: 10px !important;
}
}



---------- Добавлено 16.11.2018 в 16:55 ----------

Еще при ширине экрана 991 (стили выше) Хорошо бы весь блок .ftco-navbar-light .info { сдвинуть немного ниже от шапки.

E
На сайте с 22.07.2016
Offline
25
#9

DiKiJ, Спасибо огромнейшее, все получилось, над адаптивностью буду работать еще.

Меню немного вправо косит, хотя margin auto стоит, я так понимаю, из-за того что он оттступ слева берет от блока с LOGO и до конца страницы, а не до блока с кнопкой.

И не могу понять почему

jpg 179039.jpg
D.iK.iJ
На сайте с 26.05.2013
Offline
178
#10
enerjze:
И не могу понять почему

Так как кнопка висит в отдельном слое с абсолютным позиционированием. Ей вообще все равно на другие элементы.

Только добавлять меню что-то вроде

padding-right: 100px;
box-sizing: border-box; //Ширина отступа не будет добавляться к ширине блока



---------- Добавлено 16.11.2018 в 17:29 ----------

А вот куда добавлять стили - удобно посмотреть по F12 через инспектор стилей.

Например, можно взять .ftco-navbar-light

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий