Форум Сайтостроение Веб-строительство

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

12
E
На сайте с 22.07.2016
Offline
25
enerjze
931

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

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


		  			<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
enerjze
#1

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

Gigabajt
На сайте с 04.10.2010
Offline
122
Gigabajt
#2

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

Лидогенерация в соц.сетях и контексте от 400 руб. за лид. Работаю с Telegram, Instagram, VK. Заказать услугу: https://impossible-studio.com
S
На сайте с 13.10.2014
Offline
171
silicoid
#3

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

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

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

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

Bootstrap. Верстка адаптивного сайта. Порядок следования DIV и Пoмoгитe нacтpoить внeшний вид
E
На сайте с 22.07.2016
Offline
25
enerjze
#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
229
D.iK.iJ
#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
enerjze
#6
DiKiJ:
Все это такие вопросы, которые с сайтом можно решить за 5 минут - через инспектор стилей.
А без сайта - хоть час голову ломать.

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

Вот

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

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

D.iK.iJ
На сайте с 26.05.2013
Offline
229
D.iK.iJ
#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 { сдвинуть немного ниже от шапки.

Фиксированные или адаптивные для RiveSolutions SEO Spider Дизайн ютуба
E
На сайте с 22.07.2016
Offline
25
enerjze
#9

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

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

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

jpg 179039.jpg
Стоит ли делать мобильную Адаптивные блоки Оптимальное размещение блоков на
D.iK.iJ
На сайте с 26.05.2013
Offline
229
D.iK.iJ
#10
enerjze:
И не могу понять почему

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

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

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



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

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

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

400+ ссылок страницы помогите Что делает > угловая Как прописать background в
12

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