Question

我正在尝试将此导航栏设置为单行。但它会转到下一行。

如何在一行中控制此溢出。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 <div class="col-md-5">
 <div class="nav-tabs-custom">
            <ul class="nav nav-tabs">
			 <li class="text-center tag"><a href="#"><span class="glyphicon glyphicon-menu-left next_icon"></span></a></li>
              <li class="active text-center spacer" style="color:black;"><a href="#glyphicon" data-toggle="tab">Today<br> <span><b>21</b></span></a></li>
              <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Mon<br> <span><b>22</b></span></a></li>
			    <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Tues<br> <span><b>23</b></span></a></li>
				  <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Wed<br> <span><b>24</b></span></a></li>
				    <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Thur<br> <span><b>25</b></span></a></li>
					  <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Fri<br> <span><b>26</b></span></a></li>
					    <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Sat<br> <span><b>27</b></span></a></li>
						<li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Tues<br> <span><b>23</b></span></a></li>
				  <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Wed<br> <span><b>24</b></span></a></li>
				    <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Thur<br> <span><b>25</b></span></a></li>
					  <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Fri<br> <span><b>26</b></span></a></li>
					    <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Sat<br> <span><b>27</b></span></a></li>
             
          <li class="text-center tag pull-right"><a href="#"><span class="glyphicon glyphicon-menu-right next_icon"></span></a></li>
          
			</ul>
	
			</div>
      </div>
</body>
</html>

请帮我解决这个问题。

Answer 1

为较小的内容添加此内容可能会有效，但需要注意的是，您需要控制人们可以看到其余内容的方式：

.nav.nav-tabs {
  white-space: nowrap;
  overflow: hidden;
}

.nav.nav-tabs li {
  float: none;
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="nav-tabs-custom">
  <ul class="nav nav-tabs">
    <li class="text-center tag pull-right"><a href="#"><span class="glyphicon glyphicon-menu-right next_icon"></span></a></li>
    <li class="text-center tag"><a href="#"><span class="glyphicon glyphicon-menu-left next_icon"></span></a></li>
    <li class="active text-center spacer" style="color:black;"><a href="#glyphicon" data-toggle="tab">Today<br> <span><b>21</b></span></a></li>
    <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Mon<br> <span><b>22</b></span></a></li>
    <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Tues<br> <span><b>23</b></span></a></li>
    <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Wed<br> <span><b>24</b></span></a></li>
    <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Thur<br> <span><b>25</b></span></a></li>
    <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Fri<br> <span><b>26</b></span></a></li>
    <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Sat<br> <span><b>27</b></span></a></li>
    <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Tues<br> <span><b>23</b></span></a></li>
    <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Wed<br> <span><b>24</b></span></a></li>
    <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Thur<br> <span><b>25</b></span></a></li>
    <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Fri<br> <span><b>26</b></span></a></li>
    <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Sat<br> <span><b>27</b></span></a></li>
  </ul>
</div>

Answer 2

如果您想要一个可滚动的导航栏，请添加overflow : auto。

如果您希望导航栏位于同一行而不考虑屏幕宽度，请使用Bootstrap网格将屏幕划分为不同屏幕的不同部分。

https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

如何控制导航栏的溢出

2 个答案: