Question

您好我想在bootstrap中将图像插入jumbotron组件。

我想将它插入jumbotron的右侧区域。我有这段代码：

 <section class="jumbotron text-center"> 
  <div class="container">
    <h1 class="jumbotron-heading">My site</h1>
    <p class="lead text-muted">Welcome to our page</p><br>
    <h2 class="jumbotron-heading"><b>Random form</b></h1><br>
...

这就是我得到的： site

我需要使用css还是？

也许我的问题很愚蠢而且无法完成但我刚刚开始学习boostrap所以请理解我。

感谢所有答案。

Answer 1

您可以使用Bootstrap网格实现此目的（我假设您使用的是3.3.7版本）根据需要调整网格响应断点：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <h1>Hello, world!</h1>
        <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
      </div>
      <div class="col-xs-2">
        <img class="img-responsive" src="https://cdn.pixabay.com/photo/2017/10/01/18/47/trimaran-2806616_1280.jpg" alt="">
      </div>
    </div>
  </div>
</div>

此外：如果您需要使用.container之外的图像，则需要将容器包装在col-xs-offset-2 col-xs-8 div中。同样，您可能需要调整列和响应断点。

如何将图像添加到jumbotron组件的右侧区域（bootstrap）

1 个答案: