Spanx 클래스가 작동하지 않습니다.

저는 Twitter Bootstrap을 사용합니다. 코드는 다음과 같습니다.Spanx 클래스가 작동하지 않습니다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Scafffolding: Fixed</title> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<style type="text/css"> 
.span12{ 
background: black; 
color: white; 
padding: 20px 0; 
text-align: center; 
} 
.span6{ 
background: blue; 
color: white; 
padding: 20px 0; 
text-align: center; 
margin-top: 15px; 
} 
</style> 
</head> 
<body> 
<div class="container"> 
    <div class="row"> 
     <div class="span12">Span12</div>   
    </div> 
    <div class="row"> 
     <div class="span6">Span6</div> 
     <div class="span6">Span6</div> 
    </div>   
</div> 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html>

출력은 첫 번째 행과 두 번째 행의 두 열로 구성되어야합니다. 그러나 출력은 3 개의 행으로 구성됩니다. 왜?

출처

2014-04-03 Karthi prime

기존 상자 모델을 사용하는 부트 스트랩 2를 사용하는 것 같습니다. 범위에 패딩을 추가하면 효과적으로 넓혀서 더 이상 단일 행으로 감싸지 않습니다.

대신에 span* 개의 요소에 하위 div를 추가하고 여백을 지정하십시오.

부트 스트랩 3은 너비 계산에서 패딩을 포함하여 box-sizing: border-box을 보드 전체에 적용하여 이러한 문제 중 일부를 완화합니다.

출처

2014-04-03 16:46:17 isherwood

죄송합니다, 실제로 내가 부트 스트랩 3.1.1을 사용

다음은 부트 스트랩 3 비계 시스템에 대한 문서입니다. –

그러면 스팬 클래스가 모두 잘못되었습니다. – isherwood

나는 잘못된 튜토리얼을 따라 가고있다 !! 나는 그것을 검사한다. –

부트 스트랩 2 스팬을 사용하고있는 것처럼 보이지만 부트 스트랩 3.1을 사용하고 있다고합니다. 대신

열을 생성하는 부트 스트랩이 방법입니다

<div class="row"> 
    <div class="span6">Span6</div> 
    <div class="span6">Span6</div> 
</div>

을하는

,이 같은 일을해야합니다

<div class="row"> 
    <div class="col-sm-6">Span6</div> 
    <div class="col-sm-6">Span6</div> 
</div>

클래스 이름이 변경된 부트 스트랩 (3) 모바일을 사용하기 때문에 처음에는 Bootstrap 2와는 대조적으로 접근했습니다. 여기에 나와있는 코드는 div를 2 열로 플로팅하고 휴대 전화 화면에서 div를 열면 하나의 열로 축소됩니다. 화면 크기에 관계없이 2 열에 머물도록하려면 col-sm-6을 col-xs-6으로 변경하십시오. http://getbootstrap.com/css/#grid-example-basic

출처

2014-04-03 17:00:58

매우 유용합니다 !! 어떤 종류의 웹 사이트 디자인을 위해 부트 스트랩을 사용하도록 권장합니까? –

모든 종류의 사이트에 유용합니다. :) 저는 주로 프로토 타입을 프로토 타이핑하는 데이 파일을 사용합니다. 또는 사이트에서 예산에 맞게 응답해야 할 필요가있는 경우 작업이 훨씬 빨라집니다. –

Spanx 클래스가 작동하지 않습니다.

답변

관련 문제