Ширина панели поиска в начальной загрузке навигационной панели + смещение

Я хотел бы увеличить ширину текста ввода на панели навигации Boostrap и сохранить его отзывчивым, но не знаю, как это сделать. Кажется, это совершенно невозможно Вот пример кода http://www.bootply.com/klx0LnIMF9

Раньше я смотрел этот пост: Bootstrap 3 - Как максимизировать ввод ширина внутри панели навигации

На самом деле код, предоставленный Бассом Джобсеном, является точно таким же кодом, каким-то образом он работает для начальной загрузки 3.0.0, но не для начальной загрузки 3.2.0.

Если кто-то может помочь, это может быть здорово,

заранее спасибо

Ансельм


css twitter-bootstrap-3 navbar
person Anselme    schedule 13.09.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

ну, это не то же самое решение, которое вы указали в этой ссылке, просто быстрое исправление, которое я сделал для этого вопроса, и может потребоваться несколько корректировок в соответствии с вашими потребностями, но взгляните на свой пример разветвления

Только одно крошечное изменение в вашем HTML (этот встроенный стиль вам вообще не нужен, и он скорее раздражает, чем полезен) и немного CSS следующим образом:

.navbar-form {
    padding:0;
    margin-right: 0px;
    margin-left: 0px;
    display: inline-block;
    width: 50% !important;
    border: 0px none;
}
.form-group {
    width:100%;
}
.input-group-addon:first-child {
    border-right: 0px none;
    width: 30px !important;
}
.navbar-form .input-group {
    vertical-align: middle;
    display: inline-table;
    width: 100%;
}

Как вы, наверное, заметили, я просто избавился от float и заменил свойства элементов встроенными. После этого у меня есть возможность лучше играть с адаптивной шириной. Вы, вероятно, заметите !important определения. Они могут вам понадобиться, а могут и не понадобиться (в Bootstrap есть несколько объявлений !important, так что обязательно протестируйте их), но в основном я применяю это ко ВСЕМУ размеру, так что вы, вероятно, захотите изменить этот width: 50% !important; в .navbar- form в width: 100% !important; для 768 пикселей и меньше, но в любом случае здесь у вас есть инструменты, с которыми можно поиграться и настроить по своему усмотрению.

person Devin    schedule 13.09.2014
comment
спасибо фабио! Это действительно помогло мне; Раньше я немного знал CSS, но когда дело доходит до отзывчивости и% в нем, я просто теряюсь... Еще раз спасибо - person Anselme; 14.09.2014