부트 스트랩 3/4, 컨테이너 유체 또는 열이없는 행의 컨테이너. 그래픽 예를

나는 그림에서이 같은 간단한 스키마가 필요합니다 부트 스트랩 3/4, 컨테이너 유체 또는 열이없는 행의 컨테이너. 그래픽 예를

이

는 시도입니다 : http://plnkr.co/edit/6v6C4PZCGfvH9FavNai0?p=preview를 성공하지.

어떻게 수행하나요?

나는 그림이 필요합니다. 정확하게.

xs 모드에서는 많은 것들을 비활성화합니다. 내 문제는 데스크톱 모드입니다.

<div class="container-fluid" style="background:red"> 
     <div class="row"> 
     <div class="d-inline-block" style="background-color:blue"> 
      <div class="container"> 
      <nav class="navbar navbar-light" style="background:white"> 
       <a class="navbar-brand" href="#">Navbar</a> 
       <ul class="nav navbar-nav"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">Home</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Features</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Pricing</a> 
       </li> 
       </ul> 
       <ul class="nav navbar-nav pull-xs-right"> 
       <li class="nav-item"> 
        <a class="nav-link" href="#">Right</a> 
       </li> 
       </ul> 
      </nav> 
      </div> 
     </div> 
     <div class="d-inline-block" style="background-color:yellow; float:right"> 
      <span class="d-inline-block" style="background:white; padding: 20px">User box</span> 
     </div> 
     </div> 
    </div>

출처

2016-08-12 John Sam

-1

grid/colmuns orientantion이없는 부트 스트랩에는 별다른 의미가 없습니다. 내부 요소 "사용자 상자"에 대해 고정 너비를 설정할 수 있습니다.

이 내가 필요하지 않습니다이 코드를

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link data-require="[email protected]" data-semver="4.0.0-alpha.3" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" /> 
 
    <script data-require="[email protected]" data-semver="4.0.0-alpha.3" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div class="container-fluid" style="background:red"> 
 
     <div class="row"> 
 
     
 
      <div class="container"> 
 
      <div class="col-md-9 col-lg-9"> 
 
       <nav class="navbar navbar-light" style="background:white"> 
 
       <a class="navbar-brand" href="#">Navbar</a> 
 
       <ul class="nav navbar-nav"> 
 
        <li class="nav-item active"> 
 
        <a class="nav-link" href="#">Home</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
        <a class="nav-link" href="#">Features</a> 
 
        </li> 
 
        <li class="nav-item"> 
 
        <a class="nav-link" href="#">Pricing</a> 
 
        </li> 
 
       </ul> 
 
       <ul class="nav navbar-nav pull-xs-right"> 
 
        <li class="nav-item"> 
 
        <a class="nav-link" href="#">Right</a> 
 
        </li> 
 
       </ul> 
 
       </nav> 
 
      </div> 
 
      <div class="col-md-3 col-lg-3" style="background-color:yellow; float:right"> 
 
       <span class="d-inline-block" style="background:white; padding: 20px">User box</span> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    </body> 
 

 
</html>

출처

2016-08-12 22:09:48

친애하는 @Yuri 라모스을보십시오. 첫 번째 열 (메뉴 끝 부분)의 오른쪽에있는 화면의 왼쪽에서 빨간색 색이 필요합니다. 첫 번째 열에는 "컨테이너"클래스를 사용할 수 없으며 두 번째 열은 유동적이어야하며 내용은 페이지별로 많이 변경 될 수 있으므로 유동적이어야합니다 (col-md-3이 아님). 나는 col-md-3, 또는 2 또는 1이 충분한 지 말할 수 없다. 그리고 나는 그 상자의 오른쪽 여백을 원하지 않는다. 지금은 더 명확 해? –

내 사진을보십시오. 메뉴의 왼쪽에서 파란색으로 ("컨테이너"기능이 있든 없든) 필요합니다. 그리고 컨테이너 - 유체의 오른쪽에 녹색 상자를위한 공간이 필요합니다 (작은 패딩과 여백이 있음). –

유리, 뭐라구? –

부트 스트랩 3/4, 컨테이너 유체 또는 열이없는 행의 컨테이너. 그래픽 예를

답변

관련 문제