嗨，我正在使用引導程式來設計我的頁面。
const AddRestaurent = () => {
return (
<div className="mb-4">
<form action="">
<div className="form-row">
<div className="col">
<input type="text" className="form-control" placeholder="name"/>
</div>
<div className="col">
<input type="text" className="form-control" placeholder="location"/>
</div>
<div className="col">
<select className="custom-select my-1 mr-sm-2">
<option disabled>Price Range</option>
<option value="1">$</option>
<option value="2">$$</option>
<option value="3">$$$</option>
<option value="4">$$$$</option>
<option value="5">$$$$$</option>
</select>
</div>
<button className="btn btn-primary">Add</button>
</div>
</form>
</div>
)
}
export default AddRestaurent
這些組件應位于同一行。但他們排在不同的行。我在做什么錯誤。我在 index.html 中包含了庫
uj5u.com熱心網友回復：
我假設您使用的是引導程式 5.0。
https://getbootstrap.com/docs/5.0/forms/layout/
嘗試使用row代替form-row.
您還可以使用裝訂線（例如g-2）來調整裝訂線寬度。
const AddRestaurent = () => {
return (
<div className="mb-4">
<form action="">
<div className="row">
<div className="col">
<input type="text" className="form-control" placeholder="name"/>
</div>
<div className="col">
<input type="text" className="form-control" placeholder="location"/>
</div>
<div className="col">
<select className="custom-select my-1 mr-sm-2">
<option disabled>Price Range</option>
<option value="1">$</option>
<option value="2">$$</option>
<option value="3">$$$</option>
<option value="4">$$$$</option>
<option value="5">$$$$$</option>
</select>
</div>
<button className="btn btn-primary">Add</button>
</div>
</form>
</div>
)
}
export default AddRestaurent
uj5u.com熱心網友回復：
您必須使用 row 作為類名而不是 group-row
<div className="form-row"> replace with <div className="row">
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/320859.html
標籤：反应 推特引导 bootstrap-4
上一篇：引導程式4中的類折疊是什么意思？