html 圖片新手Grid排版問題

html image python bootstrap flask

picross 2020-02-13 17:45:33 ‧ 2420 瀏覽

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>

出來的結果為:

不知道為什麼第二排會有個偏差在
我理想中的結果是:

froce iT邦大師 1 級 ‧ 2020-02-13 18:13:40 檢舉

有沒有可能是圖片自身的留白？

picross iT邦新手 5 級 ‧ 2020-02-14 08:50:28 檢舉

圖片檢查了四種箭頭都是59x59, 大小應該都是一樣的, png去背的圖檔

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

阿展展展

iT邦好手 1 級 ‧ 2020-02-14 03:33:00

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

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

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

回應 6
分享
檢舉

看更多先前的回應...收起先前的回應...

picross iT邦新手 5 級 ‧ 2020-02-14 08:49:51 檢舉

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

阿展展展 iT邦好手 1 級 ‧ 2020-02-14 09:06:25 檢舉

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

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

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

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

阿展展展 iT邦好手 1 級 ‧ 2020-02-14 09:25:14 檢舉

你是用 bootstrap 阿....

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

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

登入發表回應

johnnyjong823

iT邦新手 4 級 ‧ 2020-02-14 09:53:19

HI 我是強尼

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

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

強尼

回應 1
分享
檢舉

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

感謝, 但不知道為什麼參考您的改越改越奇怪, 然後整頁全部複製貼上卻變這樣

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

登入發表回應

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