iT邦幫忙

0

html 圖片新手Grid排版問題

Python Flask
Bootstap 3.3.7

程式碼:

            <div class="form-horizontal">
              <div class="form-group ">
                <input type="image" class="col-xs-offset-2" style="float:left" src="static/front.png"  id="btn_front" onclick="send();" />
                <input type="image" class="col-xs-offset-3" style="float:left" src="static/front.png"  id="btn_up" onclick="send();" />
              </div>
              <div class="form-group">
                <input type="image" class="col-xs-offset-1" style="float:left" src="static/left.png"  id="btn_left" onclick="send();" />
                <input type="image" class="col-xs-offset-1" style="float:left" src="static/right.png"  id="btn_right" onclick="send();" />
                <input type="image" class=" col-xs-offset-2 " style=" float:left" src="static/right.png"  id="btn_down" onclick="send();" />
              </div>
              <div class="form-group">
                <input type="image" class="col-xs-offset-2" style="float:left" src="static/back.png"  id="btn_back" onclick="send();" />
                <input type="image" class="col-xs-offset-3" style="float:left" src="static/back.png"  id="btn_catch" onclick="send();" />
              </div>
            </div>

出來的結果為:
https://ithelp.ithome.com.tw/upload/images/20200213/20123386fZYQwYMs91.jpg

不知道為什麼第二排會有個偏差在
我理想中的結果是:
https://ithelp.ithome.com.tw/upload/images/20200213/20123386fB2oQjB6zI.jpg

froce iT邦大師 2 級 ‧ 2020-02-13 18:13:40 檢舉
有沒有可能是圖片自身的留白?
picross iT邦新手 5 級 ‧ 2020-02-14 08:50:28 檢舉
圖片檢查了四種箭頭都是59x59, 大小應該都是一樣的, png去背的圖檔
0
阿展展展
iT邦好手 1 級 ‧ 2020-02-14 03:33:00

大哥 你沒有 PO CSS 阿XDDDD
我沒有這麼厲害憑 HTML 就可以神算問題在哪裡

請提供你的 CSS 以及插入箭頭的原圖

另外 這種問題可以用 background-color 來 debug
有時候透明的 div 跟你想像的樣子 不太一樣

看更多先前的回應...收起先前的回應...
picross iT邦新手 5 級 ‧ 2020-02-14 08:49:51 檢舉

沒有使用CSS, 圖片檢查了四種箭頭都是59x59 大小應該都是一樣的

那你的空格哪來的!??!?!

picross iT邦新手 5 級 ‧ 2020-02-14 09:09:33 檢舉

是指這個嗎?class="col-xs-offset-1"

picross iT邦新手 5 級 ‧ 2020-02-14 09:10:59 檢舉

https://ithelp.ithome.com.tw/upload/images/20200214/20123386xuvS3j74c1.pnghttps://ithelp.ithome.com.tw/upload/images/20200214/20123386XRocVRP1Dc.pnghttps://ithelp.ithome.com.tw/upload/images/20200214/20123386fS0NKJmNVJ.pnghttps://ithelp.ithome.com.tw/upload/images/20200214/20123386xymfp9Xrcq.png

你是用 bootstrap 阿....

picross iT邦新手 5 級 ‧ 2020-02-14 09:42:54 檢舉

對的, 我第二行有打Bootstap 3.3.7, 但看了很多次文件應該沒有理解錯col-xs-offset的用法吧? 看起來應該空白間隔要一樣大, 不知道為什麼第二排的跑掉了

3
johnnyjong823
iT邦新手 5 級 ‧ 2020-02-14 09:53:19

HI 我是強尼

給你參考一下
大概這樣排一下就可以了
https://codepen.io/johnnyjong823/pen/wvaMqPo

有問題可以再問我,但不能叫我幫你做唷:D

強尼

picross iT邦新手 5 級 ‧ 2020-02-14 11:03:10 檢舉

感謝, 但不知道為什麼參考您的改越改越奇怪, 然後整頁全部複製貼上卻變這樣https://ithelp.ithome.com.tw/upload/images/20200214/201233868jSZan5y43.jpg
https://ithelp.ithome.com.tw/upload/images/20200214/20123386cEo7WaQyKo.jpg

不知道為什麼整段貼會和codepen跑出來的不一樣?

2
YoChen
iT邦新手 1 級 ‧ 2020-02-14 10:37:57

您可能要重新閱讀一下Bootstrap 3.3.7版的官方文件
.col或是.col-offset的使用都是必須搭配.container.row的,
且預設會將水平向的排版預設切分為12等分(但可以自己定義XDDD)
因此綜合以上的觀點,
就可以將程式碼調整為以下結果~
Online Demo

<div class="form-horizontal container">
  <div class="form-group row">
    <input type="image" class="col-xs-offset-4 col-xs-1" src="static/front.png" id="btn_front" onclick="send();" />
    <input type="image" class="col-xs-offset-3 col-xs-1" src="static/front.png" id="btn_up" onclick="send();" />
  </div>
  <div class="form-group row">
    <input type="image" class="col-xs-offset-3 col-xs-1" src="static/left.png" id="btn_left" onclick="send();" />
    <input type="image" class="col-xs-offset-1 col-xs-1" src="static/right.png" id="btn_right" onclick="send();" />
    <input type="image" class="col-xs-offset-2 col-xs-1" src="static/right.png" id="btn_down" onclick="send();" />
  </div>
  <div class="form-group row">
    <input type="image" class="col-xs-offset-4 col-xs-1" src="static/back.png" id="btn_back" onclick="send();" />
    <input type="image" class="col-xs-offset-3 col-xs-1" src="static/back.png" id="btn_catch" onclick="send();" />
  </div>
</div>

Demo

picross iT邦新手 5 級 ‧ 2020-02-14 11:03:20 檢舉

感謝, 可以正常對齊了!
https://ithelp.ithome.com.tw/upload/images/20200214/20123386QyO8c1r62E.jpg

我要發表回答

立即登入回答