Bootstrap Grid-system 不使用图像和表格作为列
Posted
技术标签:
【中文标题】Bootstrap Grid-system 不使用图像和表格作为列【英文标题】：Bootstrap Grid-system is not working with image and table as column 【发布时间】：2020-11-02 18:20:29 【问题描述】：我对 Bootstrap Grid 系统有一个特定的问题，希望您能帮助我。 我目前正在处理一个 aspx 文件，我希望在该文件的左侧有一个图像，在右侧有一个表格。
我现在的问题是，它不是从左到右，而是从上到下。
这是我在 aspx 文件中的代码：
<head runat="server">
<title></title>
<!-- Bootstrap Import -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<form id="formFormular1" runat="server">
<div>
<uc1:SearchExtension ID="SearchExtension" runat="server"/>
</div>
<div class="container">
<div class="row">
<!-- Belegformular -->
<div id="belegFormular" runat="server" class="col-lg-10">
<img src="about:blank" id="belegImage" runat="server" tabindex="-1" style="width: 500px;height:600px;"/>
</div>
<!-- Table -->
<div class="col-lg-10">
<!-- the Table is called by DBDataPlaceHolder from the CodeBehind-file -->
<asp:PlaceHolder ID="DBDataPlaceHolder" runat="server"></asp:PlaceHolder>
</div>
</div>
</div>
</form>
</body>
我希望有人可以帮助我解决这个问题。祝你有美好的一天！
如果是必要的信息：我正在使用 IE 作为浏览器。
【问题讨论】：
【参考方案1】：此布局可能会对您有所帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col 6">
<button style="width:100px">a</button>
<button style="width:100px">b</button>
</div>
<div class="col 6">
<h3>Fancy Application</h3>
</div>
</div>
<div class="row">
<div class="col 6" style="background-color:blue;height:100px;width:100px">
<img src="https://lh3.googleusercontent.com/-8T5K3BCEE0k/XLQsGob2TUI/AAAAAAAAFv0/-OiwdGTwoOQLlQN__xp5rHj3BQb767SHQCLcBGAs/h110/Logo%2BAgung%2BPanduan.png" >
</div>
<div class="col 6" style="background-color:red;height:100px;width:100px">
<table></table>
</div>
</div>
</div>
</body>
</html>
【讨论】：
【参考方案2】：引导行中的最大列是 12，从您的代码中，您使用“col-lg-10”和另一个“col-lg-10”，浏览器会自动将第二列移动到不同的行因为“10 + 10”= 20。所以将图像列和表格列的“col-lg-10”减少到 col-lg-6，以组成一行中的 12 列。您也可以添加“col-6”，这样即使在较小的屏幕上，两者也保持在同一行，但在小屏幕上的一行上可能看起来很奇怪，而且有点笨拙。
【讨论】：
不幸的是，这根本没有帮助我。即使将列更改为“col-6”，我仍然遇到同样的问题【参考方案3】：此布局可能会对您有所帮助。如果您在大型显示器上，请将 col-md-6 更改为 col-6 或 col-lg-6。
<div class="container">
<div class = "row col-12">
<div class= col-md-6>
<div class="col-4">
<button></button>
<button></button>
</div>
<img>
</div>
<div class= col-md-6>
<p>Fancy Applicatiopn</p>
<table></table>
</div>
</div>
</div>【讨论】：
此布局可能对您有所帮助。如果您在大型显示器中，请将“col-md-6”更改为“col-6”或“col-lg-6”以上是关于Bootstrap Grid-system 不使用图像和表格作为列的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap Glyphicons 不使用本地 Bootstrap 版本呈现
Bootstrap Datepicker 不工作。使用 BootStrap 3.3.1
Bootstrap 3+Rails 4 - 某些 Glyphicons 不工作