Css “如何对齐”；glyphicon“；在下拉菜单中的一条垂直线中_Css_Html_Twitter Bootstrap 3

Css “如何对齐”；glyphicon“；在下拉菜单中的一条垂直线中

css html twitter-bootstrap-3

Css “如何对齐”；glyphicon“；在下拉菜单中的一条垂直线中,css,html,twitter-bootstrap-3,Css,Html,Twitter Bootstrap 3,在移动设备的下拉菜单中，“glyphicon leaf”居中，但在垂直方向上，一行中没有对齐，如文本（附加屏幕） <div class="navbar-brand"><a href="index.html" title="Food, LLC"><h1>Food, LLC</h1> </a> </div> <button type="button" cla

在移动设备的下拉菜单中，“glyphicon leaf”居中，但在垂直方向上，一行中没有对齐，如文本（附加屏幕）

       <div class="navbar-brand"><a href="index.html" title="Food, LLC"><h1>Food, LLC</h1>
            </a>
       </div>

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

     <div id="menu_collapse" class="collapse navbar-collapse">
        <ul id="menu-list" class="nav navbar-nav">
          <li><a href="#Chicken" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Chicken</a>
          </li>
          <li><a href="#Beef" class="hidden-sm hidden-md hidden-lg ">
            <span class="glyphicon glyphicon-leaf"></span>Beef</a>
          </li>
          <li><a href="#Sushi" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Sushi</a>
          </li>
          </ul>
    </div><!--menu-list-->
    </div><!--container-->
    </nav><!--navigation menu-->
        </header>
      <!-- jQuery (Bootstrap JS plugins depend on it) -->
      <script src="js/jquery-3.2.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/script.js"></script>
    </body>

HTML

       <div class="navbar-brand"><a href="index.html" title="Food, LLC"><h1>Food, LLC</h1>
            </a>
       </div>

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

     <div id="menu_collapse" class="collapse navbar-collapse">
        <ul id="menu-list" class="nav navbar-nav">
          <li><a href="#Chicken" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Chicken</a>
          </li>
          <li><a href="#Beef" class="hidden-sm hidden-md hidden-lg ">
            <span class="glyphicon glyphicon-leaf"></span>Beef</a>
          </li>
          <li><a href="#Sushi" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Sushi</a>
          </li>
          </ul>
    </div><!--menu-list-->
    </div><!--container-->
    </nav><!--navigation menu-->
        </header>
      <!-- jQuery (Bootstrap JS plugins depend on it) -->
      <script src="js/jquery-3.2.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/script.js"></script>
    </body>


切换导航

如果使用类

wrap

将内容包装在

div

标记中，并为其指定固定宽度，则可以将多个元素相对垂直对齐。我希望这就是你想要实现的。下面的CSS类已更改

       <div class="navbar-brand"><a href="index.html" title="Food, LLC"><h1>Food, LLC</h1>
            </a>
       </div>

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

     <div id="menu_collapse" class="collapse navbar-collapse">
        <ul id="menu-list" class="nav navbar-nav">
          <li><a href="#Chicken" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Chicken</a>
          </li>
          <li><a href="#Beef" class="hidden-sm hidden-md hidden-lg ">
            <span class="glyphicon glyphicon-leaf"></span>Beef</a>
          </li>
          <li><a href="#Sushi" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Sushi</a>
          </li>
          </ul>
    </div><!--menu-list-->
    </div><!--container-->
    </nav><!--navigation menu-->
        </header>
      <!-- jQuery (Bootstrap JS plugins depend on it) -->
      <script src="js/jquery-3.2.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/script.js"></script>
    </body>

CSS:

       <div class="navbar-brand"><a href="index.html" title="Food, LLC"><h1>Food, LLC</h1>
            </a>
       </div>

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

     <div id="menu_collapse" class="collapse navbar-collapse">
        <ul id="menu-list" class="nav navbar-nav">
          <li><a href="#Chicken" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Chicken</a>
          </li>
          <li><a href="#Beef" class="hidden-sm hidden-md hidden-lg ">
            <span class="glyphicon glyphicon-leaf"></span>Beef</a>
          </li>
          <li><a href="#Sushi" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Sushi</a>
          </li>
          </ul>
    </div><!--menu-list-->
    </div><!--container-->
    </nav><!--navigation menu-->
        </header>
      <!-- jQuery (Bootstrap JS plugins depend on it) -->
      <script src="js/jquery-3.2.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/script.js"></script>
    </body>

.wrap{
  width:120px;
  text-align:left;
  display: inline-block;
}

下面是一个相同的工作示例！让我知道这是否解决了您的问题

       <div class="navbar-brand"><a href="index.html" title="Food, LLC"><h1>Food, LLC</h1>
            </a>
       </div>

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

     <div id="menu_collapse" class="collapse navbar-collapse">
        <ul id="menu-list" class="nav navbar-nav">
          <li><a href="#Chicken" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Chicken</a>
          </li>
          <li><a href="#Beef" class="hidden-sm hidden-md hidden-lg ">
            <span class="glyphicon glyphicon-leaf"></span>Beef</a>
          </li>
          <li><a href="#Sushi" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Sushi</a>
          </li>
          </ul>
    </div><!--menu-list-->
    </div><!--container-->
    </nav><!--navigation menu-->
        </header>
      <!-- jQuery (Bootstrap JS plugins depend on it) -->
      <script src="js/jquery-3.2.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/script.js"></script>
    </body>

如果使用类

wrap

将内容包装在

div

标记中，并为其指定固定宽度，则可以将多个元素相对垂直对齐。我希望这就是你想要实现的。下面的CSS类已更改

       <div class="navbar-brand"><a href="index.html" title="Food, LLC"><h1>Food, LLC</h1>
            </a>
       </div>

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

     <div id="menu_collapse" class="collapse navbar-collapse">
        <ul id="menu-list" class="nav navbar-nav">
          <li><a href="#Chicken" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Chicken</a>
          </li>
          <li><a href="#Beef" class="hidden-sm hidden-md hidden-lg ">
            <span class="glyphicon glyphicon-leaf"></span>Beef</a>
          </li>
          <li><a href="#Sushi" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Sushi</a>
          </li>
          </ul>
    </div><!--menu-list-->
    </div><!--container-->
    </nav><!--navigation menu-->
        </header>
      <!-- jQuery (Bootstrap JS plugins depend on it) -->
      <script src="js/jquery-3.2.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/script.js"></script>
    </body>

CSS:

       <div class="navbar-brand"><a href="index.html" title="Food, LLC"><h1>Food, LLC</h1>
            </a>
       </div>

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

     <div id="menu_collapse" class="collapse navbar-collapse">
        <ul id="menu-list" class="nav navbar-nav">
          <li><a href="#Chicken" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Chicken</a>
          </li>
          <li><a href="#Beef" class="hidden-sm hidden-md hidden-lg ">
            <span class="glyphicon glyphicon-leaf"></span>Beef</a>
          </li>
          <li><a href="#Sushi" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Sushi</a>
          </li>
          </ul>
    </div><!--menu-list-->
    </div><!--container-->
    </nav><!--navigation menu-->
        </header>
      <!-- jQuery (Bootstrap JS plugins depend on it) -->
      <script src="js/jquery-3.2.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/script.js"></script>
    </body>

.wrap{
  width:120px;
  text-align:left;
  display: inline-block;
}

下面是一个相同的工作示例！让我知道这是否解决了您的问题

       <div class="navbar-brand"><a href="index.html" title="Food, LLC"><h1>Food, LLC</h1>
            </a>
       </div>

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

     <div id="menu_collapse" class="collapse navbar-collapse">
        <ul id="menu-list" class="nav navbar-nav">
          <li><a href="#Chicken" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Chicken</a>
          </li>
          <li><a href="#Beef" class="hidden-sm hidden-md hidden-lg ">
            <span class="glyphicon glyphicon-leaf"></span>Beef</a>
          </li>
          <li><a href="#Sushi" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Sushi</a>
          </li>
          </ul>
    </div><!--menu-list-->
    </div><!--container-->
    </nav><!--navigation menu-->
        </header>
      <!-- jQuery (Bootstrap JS plugins depend on it) -->
      <script src="js/jquery-3.2.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/script.js"></script>
    </body>

你能发布一张你想要的图片吗？通过阅读描述和查看图片，我不清楚。您是否希望列表项以无序列表为中心，但仍以叶子排列？您能否发布一张图片，显示您希望它的外观？通过阅读描述和查看图片，我不清楚。您是否希望列表项以无序列表为中心，但仍以树叶排列？@VSolodkiy此问题可以关闭吗？是的，此问题可以关闭。@VSolodkiy此问题可以关闭吗？是的，此问题可以关闭。

       <div class="navbar-brand"><a href="index.html" title="Food, LLC"><h1>Food, LLC</h1>
            </a>
       </div>

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

     <div id="menu_collapse" class="collapse navbar-collapse">
        <ul id="menu-list" class="nav navbar-nav">
          <li><a href="#Chicken" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Chicken</a>
          </li>
          <li><a href="#Beef" class="hidden-sm hidden-md hidden-lg ">
            <span class="glyphicon glyphicon-leaf"></span>Beef</a>
          </li>
          <li><a href="#Sushi" class="hidden-sm hidden-md hidden-lg">
            <span class="glyphicon glyphicon-leaf"></span>Sushi</a>
          </li>
          </ul>
    </div><!--menu-list-->
    </div><!--container-->
    </nav><!--navigation menu-->
        </header>
      <!-- jQuery (Bootstrap JS plugins depend on it) -->
      <script src="js/jquery-3.2.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/script.js"></script>
    </body>