在Bootstrap网格中排列响应图像视图
在Bootstrap网格中排列响应图像视图
提问于 2019-03-03 23:57:42
我试图维护一个页面中的两列，其中左列是一个图像和右列是描述文本。现在，为了保持响应性属性，我的模型必须遵循以下特性:当屏幕分辨率较低时，它会自动管理图像以适应容器宽度。现在的问题是-当屏幕尺寸很小时，图像和段落会自动一个接一个地自动排列，-But图像在自动排列时无法占据整个宽度。或者当图像较大时采用更大的宽度(I无法手动给出图像大小，因为这会使图像大小在变化的屏幕分辨率中成为条形)。
现在我给出代码..
#main_head {
border: 1px solid black;
padding: 10px;
}
#main_head img {
width: auto;
height: 480px;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>NewsPaper</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./NewsStyle.css"></link>
</head>
<body>
<div class="jumbotron text-center">
<h1>THE News Daily</h1>
</div>
<div class="container">
<div class="row" style="border: 1px solid black;padding: 10px;">
<h3 class="text-center">The Most Important Article!</h3>
<div class="col-md-6 "><img src="https://i.stack.imgur.com/lIbyw.png"></div>
<div class="col-md-6">
<p>
<h4>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia,
looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..",
comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their
exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Nulla commodo tincidunt massa, id tincidunt massa sodales nec. Suspendisse quis commodo erat, ac iaculis libero. Nulla laoreet tempus eros, sit amet
scelerisque enim. Vestibulum sed facilisis ante, a eleifend arcu. Morbi porta elit sit amet auctor semper. Ut laoreet turpis eu justo vestibulum, nec tincidunt nisi fermentum. Quisque vehicula elementum massa, a convallis ante maximus et.
Donec et auctor ex. Sed eu venenatis neque. Sed faucibus semper ullamcorper. Pellentesque sodales non magna et vehicula. Ut vel ultricies ex, in feugiat est.<a>read more >>></a> </h4>
</p>
</div>
</div>
</div>
</body>
</html>
如何才能达到目标呢？任何帮助都是非常感谢的。
回答 1
Stack Overflow用户
发布于 2019-03-04 03:04:42
您可以使用"col-6“类(不使用xs、md、lg等)。这将在任何屏幕宽度上将容器一分为二：
<div class="row">
<div class="col-6">
<img src="https://i.stack.imgur.com/lIbyw.png">
</div>
<div class="col-6">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text...</p>
<a>read more >>></a>
</div>
</div>您可以在此处阅读有关bootstrap网格系统的更多信息：https://getbootstrap.com/docs/4.0/layout/grid/
至于图像，您可以尝试使用bootstrap类来设置响应性：“Bootstrap中的图像使用.img-fluid.进行响应。max-width: 100%；和height: auto；应用于图像，以便它与父元素一起缩放。”
<img src="..." class="img-fluid" alt="Responsive image" />另一种方法是使用这里描述的对象拟合：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
一些附注: h4不能是p的子类，.row中的元素(比如您的h3)应该用.col-x类(在您的例子中是col12)包装。
希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54970728
复制相关文章
相似问题