如何將列移動到右側

我試圖將列向右移動，直到找到合適的位置爲止。當我使用填充將其向右移動時，它將我的照片壓縮在一起。我也想用col-md-4將我的圖片放在一起。我搜索了一個答案，但沒有發現任何與我的問題有關的東西。我仍然是新手，任何幫助都會很棒。如何將列移動到右側

header { 
 
    min-height: 110px; 
 
    background-color: darkorange; 
 
    border: 1px solid burlywood; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
header h1 { 
 
    margin: 15px; 
 
    text-align: center; 
 
    font-family: 'Indie Flower', cursive; 
 
} 
 

 
.img { 
 
    padding-top: 10px; 
 
} 
 

 
.thumbnail { 
 
    width: 275px; 
 
    height: 225px; 
 
} 
 

 
.img_pad { 
 
    margin-left: 15%; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Take 5 Forms</title> 
 
    <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"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Spirax" rel="stylesheet"> 
 
    <title>Painting website</title> 
 
    <style> 
 

 
    </style> 
 

 
</head> 
 

 
<body> 
 
    <header id="header"> 
 
    <h1><strong>Guide to Interior House Painting:<br> 
 
      A guide to getting your painting projects done efficiently and quickly!</strong></h1> 
 
    </header> 
 
    <div class="container"> 
 
    <div class="row img_pad"> 
 

 
     <div class="col-md-4 img"> 
 
     <a href="#" class="thumbnail"> 
 
      <img src="paint_brush3" style="border: 1px solid black; height:215px; width:260px;" alt="No Picture Found"> 
 
     </a> 
 
     <p>Click on the image above for a list of links that will get you ideas on some colors.</p> 
 
     </div> 
 
     <div class="col-md-4 img"> 
 
     <a href="#" class="thumbnail"> 
 
      <img src="/images/drop_cloth.jpg" alt="125x125" style="height:215px;" alt="No Picture Found"> 
 
     </a> 
 
     <p>Click on this picture for some instructions on how to paint your room.</p> 
 
     </div> 
 
     <div class="col-md-4 img"> 
 
     <a href="#" class="thumbnail"> 
 
      <img src="/images/paint_brush.jpg" style="height:215px;" alt="No Picture Found"> 
 
     </a> 
 
     <p>Click on this picture for a list of items you will need for interior painting.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 

 

 
</body>

來源

2017-04-13 Michael D

我固定我的問題。我用.img {position：relative;左邊然後是我想要的％;} –

更新2：，
我已經更新了小提琴。

Check this它有良好的引導模板，這將使您的生活變得輕鬆。

更新1：，
這是你要求的嗎？
我爲小型和超小型屏幕添加了類col-sm-6 col-xs-6。
編號：https://v4-alpha.getbootstrap.com/layout/grid/

header { 
 
    min-height: 110px; 
 
    background-color: darkorange; 
 
    border: 1px solid burlywood; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
header h1 { 
 
    margin: 15px; 
 
    text-align: center; 
 
    font-family: 'Indie Flower', cursive; 
 
} 
 

 
.img { 
 
    width: 100%; 
 
    padding-top: 10px; 
 
} 
 

 
.thumbnail { 
 
    width: 100%; 
 
    height: 225px; 
 
} 
 

 
.img_pad { 
 
    margin-left: 15%; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Take 5 Forms</title> 
 
    <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"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Spirax" rel="stylesheet"> 
 
    <title>Painting website</title> 
 
    <style> 
 

 
    </style> 
 

 
</head> 
 

 
<body> 
 
    <header id="header"> 
 
    <h1><strong>Guide to Interior House Painting:<br> 
 
      A guide to getting your painting projects done efficiently and quickly!</strong></h1> 
 
    </header> 
 
    <div class="container"> 
 
    <div class="row img_pad"> 
 
     <div class="col-sm-3 col-md-3 col-xs-3"> 
 
     <h3>What is Lorem Ipsum?</h3> 
 
     <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum 
 
     </p> 
 
     </div> 
 
     <div class="col-sm-9 col-md-9 col-xs-9"> 
 
     <div class="col-md-4 col-sm-6 col-xs-6 img"> 
 
     <a href="#" class="thumbnail"> 
 
      <img src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.png" style="border: 1px solid black; height:215px; width:260px;" alt="No Picture Found"> 
 
     </a> 
 
     <p>Click on the image above for a list of links that will get you ideas on some colors.</p> 
 
     </div> 
 
     <div class="col-md-4 col-sm-6 col-xs-6 img"> 
 
     <a href="#" class="thumbnail"> 
 
      <img src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.png" alt="125x125" style="height:215px;" alt="No Picture Found"> 
 
     </a> 
 
     <p>Click on this picture for some instructions on how to paint your room.</p> 
 
     </div> 
 
     <div class="col-md-4 col-sm-6 col-xs-6 img"> 
 
     <a href="#" class="thumbnail"> 
 
      <img src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.png" style="height:215px;" alt="No Picture Found"> 
 
     </a> 
 
     <p>Click on this picture for a list of items you will need for interior painting.</p> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 

 

 

 
</body>

來源

2017-04-13 04:09:53

我正在尋找將它移動到小％或像素的右邊，而沒有將它們揉在一起。稍後，我將在學習時向左側添加導航欄。所以我只是想小幅增加他們的意願。 –

嗨現在檢查。我添加了一個左側面板，將圖像向右推，而不會拉伸。這是你需要的嗎？ –

當我用我的照片取代你的鏈接時，我最終得到了一個額外的列。並且你在圖片左邊的列是額外的不會在那裏。我將無法使用它。在這一點上，我的3張照片將獨立，直到我弄清楚如何做左側的導航欄。我很感謝你的幫助。我仍然在想這些東西。 –

如何將列移動到右側

回答

相關問題