어떻게 탐색 모음 오버플로를 제어 할 수 있습니다

나는이 줄을 한 줄로 만들려고합니다. 그러나 다음 줄로갑니다.어떻게 탐색 모음 오버플로를 제어 할 수 있습니다

단일 행에서이 오버플로를 제어하는 방법.

<!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"> \t \t \t <li class="text-center tag"><a href="#"></a></li> <li class="active text-center spacer" style="color:black;"><a href="#glyphicon" data-toggle="tab">Today 21</a></li> <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Mon 22</a></li> \t \t \t <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Tues 23</a></li> \t \t \t \t <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Wed 24</a></li> \t \t \t \t <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Thur 25</a></li> \t \t \t \t \t <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Fri 26</a></li> \t \t \t \t \t <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Sat 27</a></li> \t \t \t \t \t \t <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Tues 23</a></li> \t \t \t \t <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Wed 24</a></li> \t \t \t \t <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Thur 25</a></li> \t \t \t \t \t <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Fri 26</a></li> \t \t \t \t \t <li class="text-center spacer"><a href="#glyphicons" data-toggle="tab">Sat 27</a></li> <li class="text-center tag pull-right"><a href="#"></a></li> \t \t \t </ul> \t \t \t \t </div> </div> </body> </html>

이 문제를 해결하는 데 도움이 바랍니다.

출처

2017-12-15 A to Z

은 한 줄에 있어요. 화면 너비가 어떻게됩니까? –

정확히 무엇이 필요한지 설명 할 수 있습니까? 내가 이해하는 바와 같이, 회전 목마가 필요합니다. 그래서 부트 스트랩 회전 목마를 찾아야합니다. 예 : https://codepen.io/mephysto/pen/ZYVKRY –

작동 할 수 있습니다 작은 내용이 추가,하지만주의해야 할 점은 당신이 사람들이 나머지 볼 수 있습니다 방법을 제어 할 필요가있다 : 당신이 원하는 경우

.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>

출처

2017-12-15 10:40:42

"col-md-5"로 너비를 사용하고 있습니다. –

@AtoZ That works ... –

overflow : auto 추가하기 스크롤 가능 내비게이션 막대.

화면 너비와 관계없이 탐색 줄을 동일한 행에 표시하려면 부트 스트랩 그리드를 사용하여 화면마다 다른 부분의 화면을 나눕니다.

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

출처

2017-12-15 10:47:23

어떻게 탐색 모음 오버플로를 제어 할 수 있습니다

답변

관련 문제