gpt4 book ai didi

html - 将网页拆分为同一区域内的 2 列

转载 作者:太空宇宙 更新时间:2023-11-03 23:06:28 25 4
gpt4 key购买 nike

我对 bootstrap 非常陌生。

这是我的代码。

<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">TER</a>
</div>
</div>
</nav>
<div class="container">
<h1>Report Dated: 2/1/16</h1>
<p>This part is inside a .container class.</p>
<img src="pics/images.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">
<p>The .container class provides a responsive fixed width container.</p>
</div>

</body>
</html>

我想在图片旁边放置文字。像这样的东西

Picture             Text

我还想增加导航栏的高度以包含我的 Logo 。

我该怎么做。

抱歉,我不知道要用谷歌搜索什么。

最佳答案

如果想并排显示图片和文字,那么可以按照bootstrap grid结构 http://getbootstrap.com/css/#grid

上述问题的示例:

<div class="row">
<div class="col-sm-6 col-md-6 col-xs-6">
<img src="pics/images.jpg" class="img-circle " alt="Cinque Terre" width="304" height="236"></div>
<div class="col-sm-6 col-md-6 col-xs-6"><p>The .container class provides a responsive fixed width container.</p> </div> </div>
</div>

关于html - 将网页拆分为同一区域内的 2 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34557080/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com