01.29 全棧營:如何拿掉thumbnail 的邊框

不喜歡圖片有框框,外面也有框框

想要圖片外面都沒有框框(但還是有上下兩行小標籤>.<)

  1. 更改scss 去掉外面的框框,改display 後面的選項為inline。詳細教材可以看w3 school

    application.scss
    .thumbnail {
    display: inline;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    border-radius: 4px;
    transition: border 0.2s;
    background-color: white
    }
    
  2. 更改頁面內的圖片標簽,拿掉img src 後面的class = "img-thumbnail"

    index.html.erb
    <div class="thumbnail">
       <img src="https://ww1.sinaimg.cn/large/006tNc79gy1fc6tj2qgbmj30hs0hs74o.jpg" alt="bid" >
              <div class="caption">
                <h3>教練一號</h3>
              </div>
            </div>
    

Comments

comments powered by Disqus