Bootstrap Scaffolding

Question

Hallo Ich bin derzeit dabei, herauszufinden, wie man zwei Klassen nebeneinander zu schwimmen, während Bootstrap verwenden, was ich erreichen möchte, ist mein Text zu schweben nach links und Bild schweben nach rechts! Hier ist mein Code:

<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

Sie beide pull-left & pull-right oder col-xs-6 verwenden können, in Abhängigkeit von was genau willst du erreichen?

Hier ist der von jsfiddle Link gefolgt Code beide Dinge getan zeigt:

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 Link: https://jsfiddle.net/jLfcpssz/

Answer 2

Bootstrap hat eine Klasse namens pull-right and pull-left Ich denke, diejenigen arbeiten können für Sie

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>