Question

我的html标记是：

            <div class="row">
                <div class="col-sm-8">

                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                            <span class="sr-only">Toggle  navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <!-- navbar-header -->


                    <nav class="collapse navbar-collapse navigation" id="navbar-collapse">

                        <ul class="nav navbar-nav menu">
                            <li><a href="/">Home</a></li>
                            <li><a href="blog.html">Features</a></li>
                            <li><a href="resources.html">Lifestyle</a></li>
                            <li><a href="contact.html">Travel</a></li>
                            <li><a href="contact.html">Music</a></li>
                            <li><a href="contact.html">About</a></li>
                            <li><a href="contact.html">Contact Me</a></li>
                        </ul>

                    </nav>

                </div>
                <!-- navbar-collapse -->

                <div class="col-sm-4 navigation" id="social-icons">

                    <ul class="menu">

                        <a href=""><i class="fa fa-facebook"></i></a>
                        <a href=""><i class="fa fa-twitter"></i></a>
                        <a href=""><i class="fa fa-instagram"></i></a>
                        <a href=""><i class="fa fa-pinterest"></i></a>
                        <a href=""><i class="fa fa-heart"></i></a>
                        <a href=""><i class="fa fa-google-plus"></i></a>
                        <a href=""><i class="fa fa-tumblr"></i></a>

                    </ul>
                </div>
                <!-- social-icons -->
            </div><!-- row -->
        </div>
        <!-- container -->
    </nav>

在调整窗口大小时，列表堆栈可能是因为我使用了网格系统。

但我想要实现的是将响应式菜单（三条线）拉到左侧，图标保留在原位。

我正在尝试自己学习网页开发。任何帮助/建议将不胜感激。

编辑1： 在使用媒体查询将图标的位置设置为相对之后，我已经实现了这一点。

我希望图标位于右侧，菜单位于左侧。

Answer 1

将... {% load i18n %} <form class="login" method="POST" action="{% url 'account_login' %}"> <div class="loginWrapper"> <div class="loginNested"> <div class="loginBox"> {% csrf_token %} {{ form.as_p }} {% if redirect_field_value %} <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" /> {% endif %} <a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a> <button class="primaryAction" type="submit">{% trans "Sign In" %}</button> </div> </div> </div> </form> ...设置为父div，然后尝试使用此

  int indexOfFirst = value.IndexOf('\'');
  string temp = value.Remove(indexOfFirst, 1);
  int indexOfLast = temp.LastIndexOf('\'');         
  temp = temp.Remove(indexOfLast, 1);

尝试使用代码段

＆＃13;

position:relative

＆＃13;

@media (max-width:767px){
      #social-icons {
         position:absolute;
         top:15px; /*or whatever you need*/
      }
}

＆＃13;

显示图标内嵌导航

1 个答案: