Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/csharp/304.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/76.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
C# 引导网格系统无法将映像和表作为列使用_C#_Html_Asp.net_Twitter Bootstrap - Fatal编程技术网

C# 引导网格系统无法将映像和表作为列使用

C# 引导网格系统无法将映像和表作为列使用,c#,html,asp.net,twitter-bootstrap,C#,Html,Asp.net,Twitter Bootstrap,我有一个具体的问题,引导网格系统,我希望你能帮助我。 我目前正在处理一个aspx文件,我想在左侧有一个图像,在右侧有一个表 我现在的问题是,它不是从左到右而是从上到下 以下是我在aspx文件中的代码: <head runat="server"> <title></title> <!-- Bootstrap Import --> <link rel="stylesheet" h

我有一个具体的问题,引导网格系统,我希望你能帮助我。 我目前正在处理一个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作为浏览器。

此布局可能会对您有所帮助。如果您使用的是大型监视器,请将
col-md-6
更改为
col-6
col-lg-6


花式应用


引导行中的最大列数为12,根据您的代码,您正在使用“col-lg-10”和另一个“col-lg-10”,浏览器将自动将第二列移到另一行,因为“10+10”=20。因此,将图像列和表列的“col-lg-10”减少到col-lg-6,以构成一行中的12列。您也可以添加“col-6”,这样即使在较小的屏幕上,两个都保持在同一行,但在小屏幕上安装一行可能看起来很奇怪,有点笨拙。

此布局可能会对您有所帮助

<!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>

引导示例
我的第一个引导页面
调整此响应页面的大小以查看效果

A. B 花式应用
此布局可能会对您有所帮助。如果您在大型监视器中,请将“col-md-6”更改为“col-6”或“col-lg-6”。不幸的是,这对我毫无帮助。即使将我的专栏改为“col-6”,我仍然有同样的问题