Bootstrap列推拉嘗試移動列向上

我試圖給一個「團隊成員」頁面樣式：圖片的名稱&角色在下面的傳記的圖像的左側。我爲移動設計了我的佈局，並且我使用了推/拉，但是我得到了一個「浮動」（儘管我認爲它按預期運行）。See Image。Bootstrap列推拉嘗試移動列向上

<div class="container-fluid"> 
<div class="col-sm-8 col-sm-push-4"> 
    <div class="row"><h1>John Roberts</h1></div> 
    <div class="row"><h2>Chief Justice</h2></div> 
</div> 

<div class="col-sm-4 col-sm-pull-8 tmMbr_photoWithSocial"> 
    <img src="1200px-Official_roberts_CJ.jpg" class="tmMbr_photo img-rounded img-responsive" alt="Photo of Chief Justice John Roberts"> 
</div> 

<div class="tmMbr_bio col-sm-8 col-sm-push-4"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec egestas velit. Nulla convallis varius ex, eget iaculis elit mollis eu. In lobortis, nisi tincidunt blandit sagittis, diam nisl ornare felis, sit amet cursus ipsum risus vitae ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta ex rutrum, eleifend massa sit amet, tempus erat. Ut tincidunt lacus ac porttitor bibendum. Praesent consectetur lorem id euismod tincidunt. Maecenas ac fermentum mi, ut iaculis lorem. Nulla molestie hendrerit velit nec luctus. Cras fringilla sem sit amet lacus pellentesque, sodales venenatis augue blandit. Nunc a velit arcu.</p> 
    <p>Vivamus nec ex est. Quisque vel luctus massa. Quisque vitae ullamcorper tellus. Nunc consectetur id dui eu congue. Aliquam rutrum nunc quis lacus efficitur imperdiet. Aliquam eget mauris non sem egestas pellentesque. Phasellus sed venenatis risus, eu vehicula nulla.</p> 
</div>

這正確包裝沒有圖像，但一旦你加載任何人像圖像，則「生物」塊似乎想清除本身。我已經嘗試將行中的元素包裝起來，並且像地獄一樣搜索，但我無法弄清楚。

這是非常全新的，我希望寫一個（CSS？）解決方案，但也要確認這種行爲是否符合預期。

來源

2017-09-09 astn

你們看到的是引導正確的行爲。 '.col'元素左移。當你使用'push'和'pull'時，你只需要添加左右屬性。所以你的圖像div是4列，然後是8的名稱div。這是12。Bootstrap在12列網格上工作，所以當你添加8的生物div時，它將「清除」，因爲電網空間不足。你爲什麼不把生物段落與名稱和標題？除非你想在手機上的照片上方的名稱。如果是這樣的話，我建議去flexbox路線。 – disinfor

你可以第一個山坳要素重置float屬性和掉落的推/拉班沒用這裏：

.tmMbr_bio.col-sm-8.fl-r, 
 
.col-sm-8.fl-r 
 
{ 
 
    float:right; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
<div class="col-sm-8 fl-r"> 
 
    <div class="row"><h1>John Roberts</h1></div> 
 
    <div class="row"><h2>Chief Justice</h2></div> 
 
</div> 
 

 
<div class="col-sm-4 tmMbr_photoWithSocial"> 
 
    <img src="http://dummyimage.com/600x700&text=Official_roberts_CJ.jpg" class="tmMbr_photo img-rounded img-responsive" alt="Photo of Chief Justice John Roberts"> 
 
</div> 
 

 
<div class="tmMbr_bio col-sm-8 fl-r"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec egestas velit. Nulla convallis varius ex, eget iaculis elit mollis eu. In lobortis, nisi tincidunt blandit sagittis, diam nisl ornare felis, sit amet cursus ipsum risus vitae ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta ex rutrum, eleifend massa sit amet, tempus erat. Ut tincidunt lacus ac porttitor bibendum. Praesent consectetur lorem id euismod tincidunt. Maecenas ac fermentum mi, ut iaculis lorem. Nulla molestie hendrerit velit nec luctus. Cras fringilla sem sit amet lacus pellentesque, sodales venenatis augue blandit. Nunc a velit arcu.</p> 
 
    <p>Vivamus nec ex est. Quisque vel luctus massa. Quisque vitae ullamcorper tellus. Nunc consectetur id dui eu congue. Aliquam rutrum nunc quis lacus efficitur imperdiet. Aliquam eget mauris non sem egestas pellentesque. Phasellus sed venenatis risus, eu vehicula nulla.</p> 
 
</div>

來源

2017-09-09 16:00:00

Bootstrap列推拉嘗試移動列向上

回答

相關問題