Bootstrap Grid-system 不使用图像和表格作为列
[英]Bootstrap Grid-system is not working with image and table as column
问题描述
I have a specific problem with the Bootstrap Grid-system and I hope you can help me out.
我对 Bootstrap Grid 系统有一个特定的问题，希望你能帮助我。 I'm currently working on a aspx-file where I want to have a image on the left side and a table on the right side.我目前正在处理一个 aspx 文件，我想在左侧有一个图像，在右侧有一个表格。
My problem right now is, that it doesn't appear from left to right but from up to bottom.我现在的问题是，它不是从左到右而是从上到下出现。
here is my code from the aspx-file:这是我在 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" alt="" 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>
I hope that somebody can help me out with that issue.我希望有人可以帮助我解决这个问题。 Have a good day!祝你有美好的一天！
if it's a necessary info: I'm using IE as a browser.如果这是必要的信息：我使用 IE 作为浏览器。
3 个解决方案
解决方案1
1 已采纳 2020-07-14 09:10:45
This layout may help you.此布局可能会对您有所帮助。
<!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" alt="Girl in a jacket" width="500" height="100">
</div>
<div class="col 6" style="background-color:red;height:100px;width:100px">
<table></table>
</div>
</div>
</div>
</body>
</html>
解决方案2
0 2020-07-13 15:04:50
This layout may help you.此布局可能会对您有所帮助。 If you are on a large monitor change col-md-6 to col-6 or col-lg-6 .如果您在大型显示器上，请将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>
解决方案3
0 2020-07-13 16:06:08
The maximum column in a bootstrap row is 12, from your code, you're using "col-lg-10" and another "col-lg-10", the browser will automatically move the second column to a different row because "10 + 10" = 20. so reduce your "col-lg-10" to col-lg-6 for both image column and table column to make up the 12 columns in a row.引导行中的最大列是 12，从您的代码中，您使用“col-lg-10”和另一个“col-lg-10”，浏览器将自动将第二列移动到不同的行，因为“10 + 10" = 20。因此，将图像列和表格列的 "col-lg-10" 减少到 col-lg-6 以构成连续 12 列。 you can add "col-6" as well so that both remains on the same row even on smaller screens, might look weird and a little clumsy fitting all on one row on a small screen though.您也可以添加“col-6”，这样即使在较小的屏幕上，两者也可以保持在同一行，但在小屏幕上的一行上可能看起来很奇怪并且有点笨拙。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.