列を右に移動するには

適切な場所が見つかるまで、列を右に移動しようとしています。パディングを使用して右に移動すると、一緒に写真が破砕されます。 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枚の写真が一本一本立っています。私は助けに感謝しています。私はまだこのすべてのことを考え出しています。 –

答えて

関連する問題