Bootstrap腳手架

你好，我目前正試圖弄清楚如何讓兩個類在使用Bootstrap時並排浮動，我希望完成的是讓我的文本浮動到左側，圖像浮到右側！這裏是我的代碼：Bootstrap腳手架

<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; 
}

來源

2017-02-06 Ronnie Gurr

是你的意思是其img在區域和文本的右側在區域的左側？那麼你應該使用左拉和右拉類bootstrap – sagar

@sagar是的，這是正確的 –

你實際使用哪個版本的Bootstrap？ – vanburen

您可以同時使用pull-left & pull-right或col-xs-6，這取決於類你想要達到什麼目的。

下面的代碼，然後顯示兩件事的jsfiddle鏈接來實現：

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/

來源

2017-02-06 18:57:10

引導有一個叫pull-right and pull-left我認爲那些可以爲你工作

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>

來源

2017-02-06 18:51:32 happymacarts

Bootstrap腳手架

回答

相關問題