부트 스트랩 스캐 폴딩

Question

안녕하세요 저는 현재 부트 스트랩을 사용하면서 두 클래스를 나란히 띄우는 방법을 알아 내려고하고 있습니다. 달성하고자하는 것은 텍스트를 왼쪽으로 떠올리게하고 이미지를 오른쪽으로 플로트시키는 것입니다!

<div class="row-fluid"> 
    <div id="test-1" class="span6"></div> 
    <div id="test-2" class="span6"></div> 
</div> 

body { 
    background-color: black; 
} 
#test-1 { 
    background-color: white; 
    height: 200px; 
    width: 200px; 
} 
#test-2 { 
    background-image: url("http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    height: 200px; 
    width: 200px; 
} 

Answer 1

당신은 모두 pull-left & pull-right 또는 col-xs-6을 사용할 수 있습니다에 대한 작동에 따라 수 있습니다 생각 pull-right and pull-left라는 클래스가 : 여기 내 코드입니다 정확히 무엇을 달성하기를 원하십니까?

body { 
 
     background-color: black; 
 
    } 
 
    #test-1 { 
 
     background-color: white; 
 
     height: 200px; 
 
     width: 200px; 
 
    } 
 
    #test-2 { 
 
     background-image: url("http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg"); 
 
     background-size: cover; 
 
     background-repeat: no-repeat; 
 
     height: 200px; 
 
     width: 200px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
    <div class="row-fluid"> 
 
      <div id="test-1" class="span6 pull-left"></div> 
 
      <div id="test-2" class="span6 pull-right"></div> 
 
     </div> 
 
     
 
     <div class="clearfix"></div> 
 
     
 
     <div class="row-fluid"> 
 
      <div id="test-1" class="span6 col-xs-6"></div> 
 
      <div id="test-2" class="span6 col-xs-6"></div> 
 
     </div>

Jsfiddle 링크 : https://jsfiddle.net/jLfcpssz/

Answer 2

부트 스트랩 내가 그 당신이

body { 
 
    background-color: black!important; 
 
} 
 
#test-1 { 
 
    background-color: white; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
#test-2 { 
 
    background-image: url("http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg"); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    height: 200px; 
 
    width: 200px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<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.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div id="test-1" class="col-md-6 span6 pull-left"></div> 
 
    <div id="test-2" class="col-md-6 span6 pull-right"></div> 
 
    </div> 
 
</div>