如何使用bootstrap响应表标题/标题(how to make a table header/banner responsive with bootstrap)
我想根据窗口大小制作表格横幅/标题响应大小。 布局显示了我希望如何保持横幅/标题的设计，即使它们每次调整窗口时都会重新调整大小。 这是布局看起来的样子：
或者相同的布局设计只是调整了窗口
这是我到目前为止的代码：
<div class="table-responsive"> <table border="0" width="100%" height=60 cellpadding="0" cellspacing="0" class="table table-condenseď"> <tr> <td width="200"> <a href="http://www.example.com" target=_blank> <img src="img1.png" width="200" height="100" > </a> </td> <td width="15" height="38" > <img src="img2.png" width="39" height="33" > </td> <td width="100" style="color:white; font-weight: bold; color:blue;"> <font size="3"></font> <font size="5"> <?php echo $_SESSION['login']; ?> </font> </td> <td width="600" height="45" > <img src="img3.PNG" width="900" height="100" > </td> <td width="100" height="45" > <ul> <font color="blue" size="2"> <?php echo date(" d F Y ",time());?> </font> <li > <a href="logout.php">Logout</a> </li> </ul> </td> </tr> </table> </div>我已经尝试过这段代码但是我得到了原始大小的所有图像，并且所有图像都在一个小窗口中堆叠在一起。
<div class="row"> <div class="col-sm-3"> <img src="img1.png" > </a> </div> <div class="col-sm-1"> <img src="img2.png" > </div> <div class="col-sm-2"> <font size="3"></font> <font size="5"> <?php echo $_SESSION['login']; ?> </font> </div> <div class="col-sm-4"> <img src="img3.PNG" > </div> <div class="col-sm-2"> <ul> <font color="blue" size="2"> <?php echo date(" d F Y ",time());?> </font> <li > <a href="logout.php">Logout</a> </li> </ul> </div> </div>I want to make a table banner/header responsive re sizing depending on the window size. The layout shows how I want to keep the design of the banner/header even though they would re-size every time it the windows adjusts. this is how the layout look looks:
or same layout design just adjusted the window
and this is the code that I have so far:
<div class="table-responsive"> <table border="0" width="100%" height=60 cellpadding="0" cellspacing="0" class="table table-condenseď"> <tr> <td width="200"> <a href="http://www.example.com" target=_blank> <img src="img1.png" width="200" height="100" > </a> </td> <td width="15" height="38" > <img src="img2.png" width="39" height="33" > </td> <td width="100" style="color:white; font-weight: bold; color:blue;"> <font size="3"></font> <font size="5"> <?php echo $_SESSION['login']; ?> </font> </td> <td width="600" height="45" > <img src="img3.PNG" width="900" height="100" > </td> <td width="100" height="45" > <ul> <font color="blue" size="2"> <?php echo date(" d F Y ",time());?> </font> <li > <a href="logout.php">Logout</a> </li> </ul> </td> </tr> </table> </div>I have tried this code but I get all the images in their original size and all of them stacking on top of each other in a small window.
<div class="row"> <div class="col-sm-3"> <img src="img1.png" > </a> </div> <div class="col-sm-1"> <img src="img2.png" > </div> <div class="col-sm-2"> <font size="3"></font> <font size="5"> <?php echo $_SESSION['login']; ?> </font> </div> <div class="col-sm-4"> <img src="img3.PNG" > </div> <div class="col-sm-2"> <ul> <font color="blue" size="2"> <?php echo date(" d F Y ",time());?> </font> <li > <a href="logout.php">Logout</a> </li> </ul> </div> </div>最满意答案
您可以使用网格执行此操作，如下所示
.col-xs-1, .col-xs-2, .col-xs-5{
border:1px solid #000;
border-left:none;
height:70px;
}
.test:first-child {
border-left:1px solid #000;
}
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<div class="container-fluid" style="margin:12px;">
<div class="row test">
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-1"></div>
<div class="col-xs-5"></div>
<div class="col-xs-2"></div>
</div>
</div>
</body>
</html>
You can do this using grid as below
.col-xs-1, .col-xs-2, .col-xs-5{
border:1px solid #000;
border-left:none;
height:70px;
}
.test:first-child {
border-left:1px solid #000;
}
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<div class="container-fluid" style="margin:12px;">
<div class="row test">
<div class="col-xs-2"></div>
<div class="col-xs-2"></div>
<div class="col-xs-1"></div>
<div class="col-xs-5"></div>
<div class="col-xs-2"></div>
</div>
</div>
</body>
</html>
更多推荐
发布评论