HTML/Bootstrap - 在屏幕角落對齊圖像

對於快速的幾個小時我一直在試圖找出如何用Bootstrap和HTML做到這一點。我想在屏幕的角落對齊圖像，但它似乎不想按照我的方式工作。我沒有任何CSS代碼，這就是爲什麼我試圖找出如何做到這一點。我嘗試過拉班，但他們似乎也沒有幫助。HTML/Bootstrap - 在屏幕角落對齊圖像

這是HTML

<div class="shared"> 
    <div class="container"> 
     <div class="col-md-6"> 
      <p>some stuff</p> 
     </div> 

     <div class="col-md-6"> 
      <img src="img/pexels-photo-325223.jpeg"> 
     </div> 
    </div> 
</div>

這裏有我想要的一個例子，看到右邊的空間？我想通過移動側面的圖像來填充它。

EXAMPLE

我會很感激的人誰可以幫我:)！

來源

2017-04-20 Avi24

的'拉right'類工作完全正常。你把它設置在圖像上嗎？ – Morpheus

你可以分享工作'小提琴'。您展示的圖片不是很好的支持。更好地分享您擁有的實際設計。 –

'拉右'將它向右移動一點點，但仍然存在差距。 – Avi24

首先，你需要在你列的.row：

<div class="shared"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
     <p>some stuff</p> 
     </div> 

     <div class="col-md-6"> 
     <img src="img/pexels-photo-325223.jpeg"> 
     </div> 
    </div> 
    </div> 
</div>

接下來，你需要或者圖像設置爲inline-block的和文本對齊柱權，或設置要顯示的圖像塊正確地浮動。

如果您只能使用Bootstrap的內置規則，請在圖像上設置class="pull-right"。

來源

2017-04-20 10:49:43 Brandon

不起作用，仍在圖像旁邊留下間隙 – Avi24

列的左右兩側有一個裝訂線。這是你指的差距嗎？ – Brandon

我相信如此，請查看此圖片：http：//i.imgur.com/gGtUSmN。PNG這是網站上的一個部分，我想要在右側填充空白的圖像 – Avi24

在圖像標籤上使用pull-right類，如下所示。

<div class="shared"> 
    <div class="container"> 
     <div class="col-md-6"> 
      <p>some stuff</p> 
     </div> 

     <div class="col-md-6"> 
      <img class="pull-right" src="img/pexels-photo-325223.jpeg"> 
     </div> 
    </div> 
</div>

這會將您的圖像推向右側。

想想這會幫助你。

來源

2017-04-20 10:49:43

<div class="shared"> 
     <div class="container"> 
      <div class="col-md-6"> 
       <p>some stuff</p> 
      </div> 

      <div class="col-md-6 pull-right"> 
       <img src="img/pexels-photo-325223.jpeg"> 
      </div> 
     </div> 
    </div>

來源

2017-04-20 10:50:03

解決方案1：您可以在COL-MD-6使用text-right。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="shared"> 
 
    <div class="container"> 
 
    <div class="col-md-6"> 
 
     <p>some stuff</p> 
 
    </div> 
 

 
    <div class="col-md-6 text-right"> 
 
     <img src="https://dummyimage.com/200x400/000/fff"> 
 
    </div> 
 
    </div> 
 
</div>

解決方案2：您可以在COL-MD-6

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="shared"> 
 
    <div class="container"> 
 
    <div class="col-md-6"> 
 
     <p>some stuff</p> 
 
    </div> 
 

 
    <div class="col-md-6 pull-right"> 
 
     <img src="https://dummyimage.com/200x400/000/fff"> 
 
    </div> 
 
    </div> 
 
</div>

解決方案3使用右拉式：對於requiremnt添加class nopadding + text-right和一行自定義css來實現你的結果。

.shared .nopadding{ padding:0px !important}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="shared "> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-xs-6"> 
 
     <p>some stuff</p> 
 
    </div> 
 

 
    <div class="col-xs-6 nopadding text-right"> 
 
     <img src="https://dummyimage.com/200x400/000/fff"> 
 
    </div> 
 
    </div> 
 
    
 
    </div> 
 
</div>

來源

2017-04-20 10:50:26

它的工作@Sahil Dhri（悟空） –

是的，它是@RameshS（Vegeta）：P kindly upvote：D –

不知你還在看着DBZ ...？ @Sahil Dhir –

HTML/Bootstrap - 在屏幕角落對齊圖像

回答

相關問題