Bootstrap Grid-system is not working with image and table as column
Question
I have a specific problem with the Bootstrap Grid-system and I hope you can help me out. 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.
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:
<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.
3 answers
solution1
1 ACCPTED 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>
solution2
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 .
<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>
solution3
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. 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.