부트 스트랩 4 - 두 번째 열 두 개의 열 레이아웃은

-1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" crossorigin="anonymous"> 
 

 
<body> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-6 col-xs-12"> 
 
     <h1>Servers</h1> 
 
     <ul> 
 
      <li>server 1</li> 
 
      <li>server 2</li> 
 
      <li>server 3</li> 
 
     </ul> 
 
     </div> 
 
     <div class="col-md-6 col-xs-12"> 
 
     <h1>server details</h1> 
 
     <p class="lead">server 1 is online.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- /.container --> 
 

 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script> 
 

 

 
</body>

내가 부트 스트랩 2 열 레이아웃을 만들려면 모바일보기에서 세부 사항을 표시합니다. 첫 번째 열은 서버 목록을 갖습니다. 두 번째 열에는 서버 세부 정보가 있습니다. 서버가 선택되지 않은 경우 - 온라인 서버 수를 표시합니다.

모바일보기 - 열 2 열을 열 1 열 아래에 표시하고 싶지 않습니다. 그러나 열 2를 숨기거나 표시하고 싶습니다. 오른쪽에서 왼쪽으로) 스 와이프. 칼럼 2도 숨겨졌다. 모바일보기 - 서버 목록이 표시되고 사용자가 하나의 서버를 클릭하면보기가 서버 세부 정보를 표시하는 column2로 이동해야합니다. 나는/열에서 렌더링로드 세부 사항을 할 수 있습니다 2.

나는 다음과 같은 클래스로 열이 있습니다

, 컬럼 - COL-MD-6, COL-SM-12

2 열 - COL-MD-을 6, col-sm-12

나를 올바른 방향으로 안내 할 수 있습니까?

출처

2017-09-20 Shark N

때이 사업부를 숨길 나 HTML CSS 코드 –

https://getbootstrap.com/docs/4.0/utilities/display/ – Sergey

는 html 코드를 추가했습니다. –

CSS에서 생성해야합니다. 미디어 쿼리를 사용하여 다른 ID 또는 클래스 이름을 사용하여 div를 모두 다이브합니다. 그리고,

@media only screen and (max-width:300px){ 
    .column2{ 
    display:none; 
    } 
}

그리고 장치 화면의 폭이 제공하시기 바랍니다 아래 300 픽셀

출처

2017-09-20 19:55:27 kasun

부트 스트랩 4 - 두 번째 열 두 개의 열 레이아웃은

답변

관련 문제