1. 首頁
  2. 問答
  3. Bootstrap3 - 在右對齊圖像上的文字換行

Bootstrap3 - 在右對齊圖像上的文字換行

2016-11-19 44 views
-1

我使用的是Bootstrap 3.我在頁面左側有一個文本，右側有一個圖像。我試圖讓文字環繞圖像。我已經看到了這個左對齊圖像的例子，但我似乎無法得到相反的工作。Bootstrap3 - 在右對齊圖像上的文字換行

要顯示的錯誤，我已經創建了一個example on JSFiddle。

有一個標題，然後一面旗幟，這應該是一半的網頁。他們的曲棍球運動員圖像應該在橫幅的右側，並且2張圖像的頂部應該對齊，文本應該立即在橫幅下開始，然後包裹在曲棍球運動員圖像下。像報紙版面一樣。

<div class="row"> 
    <div class="col-xs-12 col-sm-7"> 

     <h2>My Title</span></h2><!-- should be left aligned--> 

     <img src="/img/title_image.png" class="img-responsive"/><!--Should be left aligned--> 
    </div> 

    <div class="col-xs-12 col-sm-5 pull-right"> 
     <h2>&nbsp;</h2> 
      <img src="/image_on_right_text_to_wrap_around.png" class="img-responsive"/> 
    </div> 

    <div class="col-xs-12">  
     <!-- This text should be under the title image and wrap underneath the larger image on the right--> 
     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
     </p> 

     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
     </p> 

    </div> 

    <div class="col-xs-12"> 

MORE TEXT HERE

Example Layout here

來源

2016-11-19 MikeOak

+0

您想在圖片文字？ –

+0

我在這裏添加了一個佈局示例：https：//i.stack.imgur.com/cDXp3.png – MikeOak

回答

0

我已經解決了與引導3，現在的行爲正確：

https://jsfiddle.net/cec9086a/

<div class="container"> 
    <div class="jumbotron"> 
    <div class="row"> 
    <h2> 
    My Title 
    </h2> 
    </div> 

     <div class="row"> 
      <div class="col-xs-12 col-sm-6 pull-left"> 

     <img src="http://cliparts.co/cliparts/piq/rGa/piqrGaGyT.png" class="img-responsive"/> 

     </div> 

<div class="col-xs-12 col-sm-6 pull-right"> 
     <img src="http://www.legendsofhockey.net/LegendsOfHockey/members/splash/P197702S.jpg" class="img-responsive pull right"/> 

    </div> 

     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
     </p> 


      <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
     </p> 

     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
     </p> 

     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
     </p> 

     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
     </p> 


     <p> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
     </p> 

     </div> 


    </div> 



</div>

來源

2016-11-24 18:45:12 MikeOak

0

這可能是你想要什麼：

<div class="media"> 
    <div class="media-body"> 
    <h4 class="media-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum.</h4> 
    ... 
    </div> 
    <div class="media-left media-middle"> 
    <a href="#"> 
     <img class="media-object" src="..." alt="..."> 
    </a> 
    </div> 
</div>

來源

2016-11-19 04:04:20 Indrawan

+0

這一個仍然只是在右側的圖像，但左側列中的任何文本不包裹在圖像下面在右側，在圖像下方留下空白區域。 – MikeOak

0

這是你想要什麼我做了幾個div，並使它看起來很簡單，你的天堂」？ t添加特定的行到您的頭像圖像，因爲這兩個圖像開始堆棧內聯。並且我改變了列div。 CODEPEN exapmle

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container-fluid"> 
 
<div class="row"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-7"> 
 

 
     <h2>My Title</span></h2><!-- should be left aligned--> 
 

 
     <img src="http://paradigmmedia.co.uk/wp-content/uploads/header-b88d930b520c523ef8a53abfb86d7523.png" class="img-responsive"/><!--Should be left aligned--> 
 
    </div> 
 
    </div> 
 
<div class="row"> 
 
    <div class="col-xs-5 col-sm-5 pull-right"> 
 
     
 
      <img src="https://lh3.googleusercontent.com/nhzkOTPaoWAYfO-LeklB_kPd5bAqm43D87Q3eHlK3alIse8rgrYPE74epbbbZ2b4EsY=w300" class="img-responsive"/> 
 
    </div> 
 

 
    <div class="col-xs-7">  
 
     <!-- This text should be under the title image and wrap underneath the larger image on the right--> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
 
     </p> 
 

 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. Integer ipsum lectus, pulvinar id arcu id, tristique luctus arcu. Maecenas non nibh sit amet risus tincidunt aliquam. Aenean ac auctor sem. Vestibulum ultrices finibus sapien sit amet condimentum. 
 
     </p> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

來源

2016-11-19 04:10:59 AVI

+0

這與我想要的很接近，但你遇到了我遇到的同樣的問題。左邊的最後一段不會在右側的黃色框圖像下面流動，它保留了佔用屏幕空間的空白區域。 – MikeOak

+0

你可以顯示一張圖片或者描繪你想要的東西嗎？ @MikeOak – AVI

+0

嗨@JokerFan，這是一個佈局示例圖片：https://i.stack.imgur.com/cDXp3.png謝謝！左邊的文字可能是變化的，只是在曲棍球運動員的形象下流動，無論大段落或段落數量如何 – MikeOak

0

基本上，任何UI框架（引導）依賴於一個網格。所以你必須做每個塊的分離，並把文本不同的列和圖像必須放在不同的列。

.bg-img{ 
 
    height:200px; 
 
background-image: url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL"); 
 
    background-repeat: no-repeat; 
 
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-5 col-sm-5"> 
 
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia</p>   
 
    </div> 
 
    <div class="col-xs-7"> 
 
     <p> 
 
     <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL" class="img-responsive"/> 
 
     </p>  
 
    </div> 
 
    </div> 
 

 
    
 
    
 
    
 
<div class="row"> 
 
    <div class="col-xs-5 col-sm-5"> 
 
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRSZQsdLrY0gp9N9JoGJlQ-Bo4AELr4TKcNZGY-DB756oozHCFL" class="img-responsive"/> 
 
    </div> 
 

 
    <div class="col-xs-7"> 
 
     
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque leo leo, id congue massa blandit eget. Donec euismod a purus ut rhoncus. Integer commodo lectus nec bibendum eleifend. Pellentesque vestibulum tellus sed massa consequat lacinia. 
 
     </p> 
 
     
 
    </div> 
 
</div> 
 
    
 
    <div class="row"> 
 
    <div class=" col-sm-6"> 
 
     <div class="bg-img"> 
 
     <h4> Lorem ipsu6 dolor sit amet</h4> 
 
     </div> 
 
     </div> 
 
     
 
    <div class="col-sm-6"> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
     </p> 
 
     </div> 
 
    </div> 
 
</div>

在上面的代碼中我已採取3行。在第一行中，我將圖像設置在左側，第二行圖像設置在右側，第三行圖像設置爲第一行，圖像上顯示文本。你可以運行我的代碼片段。祝你好運。樂於幫助。

來源

2016-11-19 04:56:02

+0

這也很接近，但請注意，如果向第一段添加更多文本，第一張圖片。它將保留在最左側的列中，並將其餘頁面中的元素向下推 – MikeOak

相關問題

 相關問題