Jump to content

промежуток между кнопками bootstrap

Featured Replies

Всем привет,использую на форуме фреймворк bootstrap

Хочу сделать такую группу кнопок

post-7634-0-62044700-1382621344.png

Но у меня на сайте между ними появляется промежуток

post-7634-0-39259900-1382621376.png

В чем может быть проблема?

 

 

 

Link to comment
https://ipbmafia.ru/topic/6110-promezhutok-mezhdu-knopkami-bootstrap/
Share on other sites

такого нету в коде,кроме как других элементов никак не относящихся к button классу 



если надо могу выложить текст из css файла(отдельный)

Link to comment
https://ipbmafia.ru/topic/6110-promezhutok-mezhdu-knopkami-bootstrap/?&do=findComment&comment=47251
Share on other sites

такого нету в коде,кроме как других элементов никак не относящихся к button классу 

если надо могу выложить текст из css файла(отдельный)

выложите, а лучше наглядно посмотреть его на форуме

Link to comment
https://ipbmafia.ru/topic/6110-promezhutok-mezhdu-knopkami-bootstrap/?&do=findComment&comment=47252
Share on other sites

Ссылка на форум у меня указанна,а файл вот

bootstrap.css

или же кусок этого кода

.btn-group {


position: relative;
display: inline-block;
*display: inline;
/* IE7 inline-block hack */

*zoom: 1;
font-size: 0;
vertical-align: middle;
white-space: nowrap;
*margin-left: .3em;
}
.btn-group:first-child {
*margin-left: 0;
}
.btn-group + .btn-group {
margin-left: 5px;
}
.btn-toolbar {
font-size: 0;
margin-top: 10px;
margin-bottom: 10px;
}
.btn-toolbar > .btn + .btn,
.btn-toolbar > .btn-group + .btn,
.btn-toolbar > .btn + .btn-group {
margin-left: 5px;
}
.btn-group > .btn {
position: relative;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.btn-group > .btn + .btn {
;
}
.btn-group > .btn,
.btn-group > .dropdown-menu,
.btn-group > .popover {
font-size: 14px;
}
.btn-group > .btn-mini {
font-size: 10.5px;
}
.btn-group > .btn-small {
font-size: 11.9px;
}
.btn-group > .btn-large {
font-size: 17.5px;
}
.btn-group > .btn:first-child {
margin-left: 0;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-left-radius: 4px;
}
.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
border-bottom-right-radius: 4px;
}
.btn-group > .btn.large:first-child {
margin-left: 0;
-webkit-border-top-left-radius: 6px;
-moz-border-radius-topleft: 6px;
border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-bottomleft: 6px;
border-bottom-left-radius: 6px;
}
.btn-group > .btn.large:last-child,
.btn-group > .large.dropdown-toggle {
-webkit-border-top-right-radius: 6px;
-moz-border-radius-topright: 6px;
border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-bottomright: 6px;
border-bottom-right-radius: 6px;
}
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active {
z-index: 2;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
-webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
*padding-top: 5px;
*padding-bottom: 5px;
}
.btn-group > .btn-mini + .dropdown-toggle {
padding-left: 5px;
padding-right: 5px;
*padding-top: 2px;
*padding-bottom: 2px;
}
.btn-group > .btn-small + .dropdown-toggle {
*padding-top: 5px;
*padding-bottom: 4px;
}
.btn-group > .btn-large + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
*padding-top: 7px;
*padding-bottom: 7px;
}
.btn-group.open .dropdown-toggle {
background-image: none;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
}
.btn-group.open .btn.dropdown-toggle {
background-color: #e6e6e6;
}
.btn-group.open .btn-primary.dropdown-toggle {
background-color: #0044cc;
}
.btn-group.open .btn-warning.dropdown-toggle {
background-color: #f89406;
}
.btn-group.open .btn-danger.dropdown-toggle {
background-color: #bd362f;
}
.btn-group.open .btn-success.dropdown-toggle {
background-color: #51a351;
}
.btn-group.open .btn-info.dropdown-toggle {
background-color: #2f96b4;
}
.btn-group.open .btn-inverse.dropdown-toggle {
background-color: #222222;
}
.btn .caret {
margin-top: 8px;
margin-left: 0;
}
.btn-large .caret {
margin-top: 6px;
}
.btn-large .caret {
border-left-width: 5px;
border-right-width: 5px;
border-top-width: 5px;
}
.btn-mini .caret,
.btn-small .caret {
margin-top: 8px;
}
.dropup .btn-large .caret {
border-bottom-width: 5px;
}
.btn-primary .caret,
.btn-warning .caret,
.btn-danger .caret,
.btn-info .caret,
.btn-success .caret,
.btn-inverse .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
.btn-group-vertical {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */

*zoom: 1;
}
.btn-group-vertical > .btn {
display: block;
float: none;
max-width: 100%;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.btn-group-vertical > .btn + .btn {
margin-left: 0;
margin-top: -1px;
}
.btn-group-vertical > .btn:first-child {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.btn-group-vertical > .btn:last-child {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.btn-group-vertical > .btn-large:first-child {
-webkit-border-radius: 6px 6px 0 0;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
}
.btn-group-vertical > .btn-large:last-child {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}

Link to comment
https://ipbmafia.ru/topic/6110-promezhutok-mezhdu-knopkami-bootstrap/?&do=findComment&comment=47254
Share on other sites

ап,помогите кто нибудь!

Link to comment
https://ipbmafia.ru/topic/6110-promezhutok-mezhdu-knopkami-bootstrap/?&do=findComment&comment=47308
Share on other sites
.btn-group > .btn {
    border-radius: 0 0 0 0;
    margin-right: 2px;
    position: relative;
}

margin-right: 2px; - убрать или поставить 0

Link to comment
https://ipbmafia.ru/topic/6110-promezhutok-mezhdu-knopkami-bootstrap/?&do=findComment&comment=47369
Share on other sites


margin-right: 2px;


такого нету в коде,

Куда смотрим?

Link to comment
https://ipbmafia.ru/topic/6110-promezhutok-mezhdu-knopkami-bootstrap/?&do=findComment&comment=47373
Share on other sites

Если быть точнее, то это специальное правило.

ТС мог его и не найти. Оно выглядит вот так:

 

post-12405-0-52424700-1382724180.png

 

:D

 

Почему я сделал скрин? Почему то маргин-left: -1px; пропадает, когда я отправляю пост! Удаляется просто. Оо

Link to comment
https://ipbmafia.ru/topic/6110-promezhutok-mezhdu-knopkami-bootstrap/?&do=findComment&comment=47375
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.


Guest
Ответить в этой теме...

Последние посетители 0

  • No registered users viewing this page.