부트 스트랩 3 다음 이미지에서 스크롤

으로, 반응 고정 우측 메뉴를 만드는 방법을 내가 달성하고자하는 것을 볼 수 있습니다 부트 스트랩 3 다음 이미지에서 스크롤

모바일

데스크톱을

어떻게해야합니까?

나는 이런 식으로 뭔가를하려고했는데 : 사전에

<div class="row"> 
    <div class="col-md-10"> 

    <div class="row"> 
     <div class="col-md-10" style="overflow:auto;"> 
     <h1>Profile</h1> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id ligula tincidunt eros eleifend porttitor. Maecenas cursus volutpat erat. 
     </p> 
     </div> 

     <!--feeds--> 
     <div class="col-md-2"> 
     <h3>-- Feeds --</h3> 
     </div> 
    </div> 

    </div> 

    <!--fixed menu--> 
    <div class="col-md-2" style="background-color:#2ecc71;padding:3px;"> 
    <div class="text-center"> 
     <img src="/img/1.png" class="img-circle" style="max-width:150px"> 
     <h3>hi!</h3> 
    </div> 
    <div> 
     <!-- menu links --> 
    </div> 
    </div> 
</div>

감사합니다.

출처

2016-06-16 Maskter

코드의 ** 최소한의 작업 예 **를 작성하십시오 (HTML/CSS/JS) (https://blog.stackoverflow.com/2014/ 09/introduction-runnable-javascript-css-and-html-code-snippets /). [mcve] 및 [ask]를 참조하십시오. – vanburen

@vanburen 완료했습니다! – Maskter

이미지가 오른쪽에 표시되지만 _fixed left menu_라고 표시되기 때문에 메뉴를 왼쪽이나 오른쪽에 배치하려고합니다. – vanburen

나는 이것이 당신이하려는 일이라고 생각합니다. 기본 부트 스트랩 navbar을 미디어 쿼리 내부에서 사용자의 필요에 맞게 위치 규칙 (position: fixed;)을 변경하여 사용할 수 있으므로 768px 미만인 경우 기본 탐색 노브로 조정됩니다. 참조 용으로 Navbar을 참조하십시오.

작동 예 : 전체 페이지에서 열어 뷰포트를 줄입니다. A [코드 단편]에서

html, 
 
body { 
 
    height: 100%; 
 
} 
 
@media (max-width: 767px) { 
 
    body { 
 
    padding-top: 50px; 
 
    } 
 
} 
 
@media (min-width: 768px) { 
 
    .navbar.sidebar-nav { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    left: auto; 
 
    height: 100%; 
 
    width: 200px; 
 
    background: #222; 
 
    overflow-y: auto; 
 
    } 
 
    .navbar.sidebar-nav .navbar-header { 
 
    width: 100%; 
 
    } 
 
    .navbar.sidebar-nav .navbar-header .navbar-brand { 
 
    float: right; 
 
    } 
 
    .navbar.sidebar-nav .navbar-nav { 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: right; 
 
    } 
 
    .navbar.sidebar-nav .navbar-nav > li { 
 
    float: none; 
 
    display: block; 
 
    } 
 
    .main-content { 
 
    margin-right: 200px; 
 
    } 
 
} 
 
/*THUMBNAIL FOR DEMO ONLY*/ 
 
.thumbnail { 
 
    border: none; 
 
    border-radius: 0px; 
 
    background: rgba(255, 255, 255, 0.75); 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.20); 
 
    padding: 25px; 
 
    max-width: 500px; 
 
    margin: 12.5px auto; 
 
} 
 
/*THUMBNAIL FOR DEMO ONLY*/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-inverse navbar-fixed-top sidebar-nav"> 
 
    <div class="container-fluid"> 
 

 
    <div class="navbar-header"> 
 
     <button data-toggle="collapse" type="button" class="navbar-toggle collapsed" data-target="#bs-nav"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Navbar Brand</a> 
 
    </div> 
 

 
    <div class="navbar-collapse collapse" id="bs-nav"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Link One</a> 
 
     </li> 
 
     <li><a href="#">Link Two</a> 
 
     </li> 
 
     <li><a href="#">Link Three</a> 
 
     </li> 
 
     <li><a href="#">Link Four</a> 
 
     </li> 
 
     <li><a href="#">Link Five</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</nav> 
 

 
<div class="main-content"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 

 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/000/000" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 
     <div class="col-lg-2 col-md-4 col-sm-6"> 
 
     <div class="thumbnail"> 
 
      <img src="http://placehold.it/450x450/f00/f00" class="img-responsive" /> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

출처

2016-06-16 02:14:04 vanburen

간단하게 굉장한! 정말 고마워! – Maskter

다시 불편을 드려 죄송합니다. 탐색 바의 링크에 아이콘이 있다고 상상해보십시오. navbar가 무너질 수 있기 때문에 아이콘 만 볼 수 있습니까? – Maskter

이 사고를 어떻게 구현하려고합니까? 뷰포트가 크기를 변경하면 아이콘이 남고 텍스트가 숨겨 지거나 축소 된 크기로 탐색 표시를 토글하는 것입니까? – vanburen

부트 스트랩 3 다음 이미지에서 스크롤

답변

관련 문제