Я хочу создать пользовательское меню, которое выглядит так: введите описание изображения здесь

Когда я создаю такое меню с помощью bootstrap, его полная ширина и не выравнивается под кнопкой. Вот так это выглядит: введите описание изображения здесь

Итак, как я мог создать такое меню с помощью начальной загрузки?

0
Zoker 10 Авг 2014 в 02:36

3 ответа

Лучший ответ

Я не могу поверить в то, что собираюсь написать, но вы не можете предполагать, что люди знают ваш исходный код, вы должны поделиться тем, что вы сделали. Когда вы поделитесь кодом, сообщество будет рад помочь. Вы можете прочитать, что это действительно важно: Как мне задать хороший вопрос?. Не думайте, что я парень, который думает, что знает все, вам следует проверить мою репутацию, вначале я задавал много вопросов, похожих на то, что вы спрашиваете.

По поводу вашего вопроса. Эта статья может сильно помочь. Я поделюсь небольшой демонстрацией того, как это выглядит. Демо: http://jsbin.com/figak/1 < / a> дизайн и все некрасиво, но в нем есть то, что вы хотите.

Это в основном то, что я добавил. Форма для навигации вправо. Я надеюсь, это поможет вам.

 <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <form action="[YOUR ACTION]" method="post" accept-charset="UTF-8">
              <input id="user_username" style="margin-bottom: 15px;" type="text" name="user[username]" size="30" />
              <input id="user_password" style="margin-bottom: 15px;" type="password" name="user[password]" size="30" />
              <input id="user_remember_me" style="float: left; margin-right: 10px;" type="checkbox" name="user[remember_me]" value="1" />
              <label class="string optional" for="user_remember_me"> Remember me</label>

              <input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In" />
           </form>
          </ul>
        </li>
      </ul>
0
Community 23 Май 2017 в 12:05

Я работаю с Foundation, а не с Bootstrap, но если ничего не помогает, вы можете сделать его абсолютно позиционированным:

.menu { position: absolute; top: 40px; left: 40px; width: 300px; }

... или вы можете сохранить его относительное положение (при условии, что это то, что есть):

.menu { position: relative; width: 300px; margin-left: 40px; }

Измените .menu на какой бы ни был фактический класс, и все готово, возможно, вам придется переопределить некоторые функции. Если класс начальной загрузки все еще применяется, вы можете добавить !important в конец вашего класса, например, width: 300px !important;, и он будет работать. Просто имейте в виду, что это должно быть крайней мерой.

Вы можете «проверить элемент» в любом новом браузере, чтобы увидеть код, используемый при начальной загрузке, а затем переопределить эти классы в вашем файле css.

Вы можете использовать медиа-запросы, чтобы сохранить ширину 100% на маленьких экранах, но сделать ее 300 пикселей на экранах больше 400 пикселей, например:

@media only screen and (min-width: 400px) {
    .menu { position: relative; width: 300px; margin-left: 40px; }
}

Надеюсь, это помогло!

0
mattroberts33 10 Авг 2014 в 02:28