Bootstrap Grid-system 不使用圖像和表格作為列

Question

我對 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" 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>

我希望有人可以幫助我解決這個問題。 祝你有美好的一天！

如果這是必要的信息：我使用 IE 作為瀏覽器。

Answer 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" 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>

Answer 2

此布局可能會對您有所幫助。 如果您在大型顯示器上，請將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>

Answer 3

引導行中的最大列是 12，從您的代碼中，您使用“col-lg-10”和另一個“col-lg-10”，瀏覽器將自動將第二列移動到不同的行，因為“10 + 10" = 20。因此，將圖像列和表格列的 "col-lg-10" 減少到 col-lg-6 以構成連續 12 列。 您也可以添加“col-6”，這樣即使在較小的屏幕上，兩者也可以保持在同一行，但在小屏幕上的一行上可能看起來很奇怪並且有點笨拙。

Bootstrap Grid-system 不使用圖像和表格作為列

問題描述

3 個解決方案

解決方案1
1 已采納 2020-07-14 09:10:45

解決方案2
0 2020-07-13 15:04:50

解決方案3
0 2020-07-13 16:06:08

Bootstrap Grid-system 不使用圖像和表格作為列

問題描述

3 個解決方案

解決方案1 1 已采納 2020-07-14 09:10:45

解決方案2 0 2020-07-13 15:04:50

解決方案3 0 2020-07-13 16:06:08

解決方案1
1 已采納 2020-07-14 09:10:45

解決方案2
0 2020-07-13 15:04:50

解決方案3
0 2020-07-13 16:06:08