在C#中使用Bootstrap的網格系統,通常是在ASP.NET MVC或ASP.NET Core項目中進行的
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Column 1</h2>
<p>Content for column 1...</p>
</div>
<div class="col-md-4">
<h2>Column 2</h2>
<p>Content for column 2...</p>
</div>
<div class="col-md-4">
<h2>Column 3</h2>
<p>Content for column 3...</p>
</div>
</div>
</div>
在這個示例中,我們使用了.container
類來創建一個容器,.row
類來創建一行,然后使用.col-md-4
類來創建三個等寬的列。這將在中等屏幕大小(例如桌面顯示器)上顯示為三列布局。在較小的屏幕上,這些列將堆疊在一起。
你可以根據需要調整列的數量和寬度,以適應不同的屏幕尺寸。例如,你可以使用.col-sm-*
、.col-md-*
、.col-lg-*
和.col-xl-*
類來為不同屏幕尺寸定義不同的列寬。
更多關于Bootstrap網格系統的信息,請參考官方文檔:https://getbootstrap.com/docs/4.5/layout/grid/