Question

我已尝试过很多来自互联网的例子，但无法得到希望的结果。

我使用bootstrap 3 +

我需要一个这样的菜单：

+-------------------------------------------------------------------------------+
|                |                                                       Phone  |
|      LOGO      |                                                      Adress  |
|                |                                                Another info  |
|-------------------------------------------------------------------------------|
| Home                                  Page 1  |  Page 2  |  Page 3 |  Page 4  |
+-------------------------------------------------------------------------------+

将SM-映射到类似的东西：

+----------------+
| Phone          |
| Adress         |
| Another info   |
|----------------|
|                |
|      LOGO      |
|                |
|----------------|
|      MENU      |
+----------------+

有人有建议吗？谢谢！

EDITED

到目前为止，我得到了这个，但标志是SM上的第一件事这是我最接近ai Need。

<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="col-lg-6 col-md-6">
      <ul class="nav navbar-nav  navbar-left">
        <li><img src="images/logo.png"></li>
      </ul>
    </div>
    <div class=" navbar-right col-lg-6 col-md-6 text-right" >
      Adress<br>
      Phone<br>
      Info
    </div>
    <div class="navbar-header">
      <button class="navbar-toggle" data-toggle="collapse" data-target="#mainNav">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
      <div class="collapse navbar-collapse" id="mainNav">
        <ul id="navlist" class="nav nav-justified">
          <li><a href="#">Reports</a></li>
          <li><a href="#">Account Management</a></li>
          <li><a href="#">Messages</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Request a Quote</a></li>
          <li><a href="#">MainSite.com</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

为您创建一个代码段。这可能会有所帮助

＆＃13;

.custom-navbar {
  text-align:right;
}
@media (max-width: 768px){
	.custom-navbar {
	  text-align:left;
	}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
   <div class=" navbar-right col-lg-6 col-md-6 custom-navbar" >
      Adress<br>
      Phone<br>
      Info
    </div>
    <div class="col-lg-6 col-md-6">
      <ul class="nav navbar-nav  navbar-left">
        <li><img src="images/logo.png"></li>
      </ul>
    </div>
   
    <div class="navbar-header pull-left">
      <button class="navbar-toggle" data-toggle="collapse" data-target="#mainNav">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
      <div class="collapse navbar-collapse" id="mainNav">
        <ul id="navlist" class="nav nav-justified">
          <li><a href="#">Reports</a></li>
          <li><a href="#">Account Management</a></li>
          <li><a href="#">Messages</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Request a Quote</a></li>
          <li><a href="#">MainSite.com</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

＆＃13;

两行导航栏按正确顺序折叠

1 个答案: