iT邦幫忙

2

bootstrape 版面div規劃的問題???如何讓它排列整齊

  • 分享至 

  • xImage

bootstrape 版面div規劃的問題???如何讓它排列整齊

讓畫面一 排列整齊 ,比如 畫面三....或者更好

我目前使用div排列,畫面二的方法???


	<!-- 編輯區域 -->
	<div class="container-fluid" v-show="!show_101">
		<form class="form-horizontal" role="form">
	    
	  
			<h3>Inquiry資料--{{action_caption}}</h3>
			<BR>


			<div class="form-group">
				<label>諮詢編號</label>
				<input v-model="webinquiry.sys_no"  type="text" disabled="false">
			</div>
			<div class="form-group">	
				<label>諮詢日期</label>
				<input v-model="webinquiry.in_date"  type="text" >
			</div>	
			<div class="form-group">
				 <label>諮詢人</label>
				 <input v-model="webinquiry.in_name"  type="text">		
 			</div>
			<div class="form-group">
				 <label>公司</label>	
				 <input v-model="webinquiry.in_company" type="text">
 			</div>	
			<div class="form-group">
				 <label>電話</label>	
				 <input v-model="webinquiry.in_tel" type="text">
 			</div>	
			<div class="form-group">
				 <label>email</label>	
				 <input v-model="webinquiry.in_email" type="text">
 			</div>	
			<div class="form-group">
				 <label>內容描述</label>	
				 <textarea v-model="webinquiry.in_memo" cols="100" rows="10" /></textarea>
 			</div>			


			<button  v-on:click="uf_save()" class="btn btn-outline-primary" type="button" >存檔</button>
			<button  v-on:click="uf_cancel()" class="btn btn-danger" type="button" >取消</button>
	
		</form>	
	</div>
	

謝謝

畫面一
畫面一

畫面二
畫面二

畫面三
畫面三

看更多先前的討論...收起先前的討論...
ccutmis iT邦高手 2 級 ‧ 2019-11-07 18:48:47 檢舉
官方其實就有很多範本可以抄了...
https://getbootstrap.com/docs/4.3/examples/
[download source code]
dragonH iT邦超人 5 級 ‧ 2019-11-07 18:52:34 檢舉
為什麼 [download source code] 點不了
[download source code] [download source code] [download source code] [download source code] [download source code] [download source code] [download source code] [download source code] [download source code]
謝謝你們...花點時間研究
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
dragonH
iT邦超人 5 級 ‧ 2019-11-07 18:29:54
最佳解答

請附上你的 code

然後

你的圖一是只有 button 想用 bootstrap 嗎XD /images/emoticon/emoticon07.gif

table 版 codepen

grid 版 codepen

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

補上部分程式碼了!!!

希望畫面整齊

使用div

比如下圖

dragonH iT邦超人 5 級 ‧ 2019-11-07 18:37:02 檢舉

一定要用 table 喔?

這年頭還有人在用 table 排版嗎 /images/emoticon/emoticon11.gif

欸 你484瞧不起table!!!/images/emoticon/emoticon02.gif

dragonH iT邦超人 5 級 ‧ 2019-11-07 18:43:33 檢舉

/images/emoticon/emoticon25.gif

dragonH iT邦超人 5 級 ‧ 2019-11-07 18:56:20 檢舉

eric19740521

兩個版本給你參考

剩下的靠你完成 /images/emoticon/emoticon29.gif

你真棒!!一下結果就出來了

請教一下
mt-5
p-3
border-bottom-0
border
這幾個用法的解釋!!上哪邊找??
我用google還沒找到

我在這網站上找到範例

你在第二個範例div
第一行 不用加上form-group嗎??

dragonH iT邦超人 5 級 ‧ 2019-11-07 21:27:02 檢舉

eric19740521

mt-5, p-3

border-bottom-0, border

官方doc都有唷

第一行 不用加上form-group嗎??

你可以去看 form-group 這個 class

有什麼 css 的效果

再決定要不要去用

我是覺得不需要

甲土豆 iT邦新手 5 級 ‧ 2019-11-08 09:28:19 檢舉

H 大神,太猛了 ,全端之神/images/emoticon/emoticon32.gif

OK,感謝大家

0
阿展展展
iT邦好手 1 級 ‧ 2019-11-07 18:40:37

如果你的需求只有這樣...那我就...這樣....

<table border="1">
        <tr>
            <td>num</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>date</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>customer</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>compony</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>phone</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>email</td>
            <td><input type="text"></td>
        </tr>
        <tr>
            <td>customer</td>
            <td><input type="text"></td>
        </tr>
    </table>

https://ithelp.ithome.com.tw/upload/images/20191107/20119546zWPGChqcFw.jpg

至於還要用什麼 bootstrap 的 class 就自己去找找囉

https://bootswatch.com/default/

因為要做rwd...

那就用 DragonH大的 grid 吧
請搜尋「網格系統」

1
PPTaiwan
iT邦好手 1 級 ‧ 2019-11-07 20:07:02

https://wrapbootstrap.com/

有些很便宜可以買來再學裡面的方法

0
賽門甜不辣
iT邦研究生 2 級 ‧ 2019-11-08 09:18:36
<div class="form-group row">
	<label class="col-12 col-lg-3">公司</label>	
	<input class="col-12 col-lg-9" v-model="webinquiry.in_company" type="text">
</div>

可以在利用 row 和 col
最外層 form-group 後面多一個 row,然後裡面的 label 和 input 都加上 col-數字即可

我要發表回答

立即登入回答