如何在jumbotron中设置<h1>和<p>的位置？
在jumbotron中设置<h1>和<p>的位置可以通过CSS样式来实现。可以使用以下方法：
- 使用CSS的flexbox布局：在jumbotron的父容器上设置display为flex，然后使用flex属性来控制<h1>和<p>的位置。例如，可以将<h1>设置为flex: 1，将<p>设置为flex: 2，这样<p>会占据<h1>的两倍宽度。
<div class="jumbotron">
<h1>Title</h1>
<p>Content</p>
</div>
<style>
.jumbotron {
display: flex;
flex-direction: column;
}
h1 {
flex: 1;
}
p {
flex: 2;
}
</style>- 使用CSS的position属性：可以将<h1>和<p>设置为绝对定位，然后使用top、left、right、bottom属性来控制它们的位置。需要将jumbotron的position属性设置为relative，以便作为<h1>和<p>的参考容器。
<div class="jumbotron">
<h1>Title</h1>
<p>Content</p>
</div>
<style>
.jumbotron {
position: relative;
}
h1 {
position: absolute;
top: 50px;
left: 50px;
}
p {
position: absolute;
top: 100px;
left: 50px;
}
</style>以上是两种常用的方法来设置<h1>和<p>在jumbotron中的位置。根据具体需求和设计，可以选择适合的方法来布局。
相关·内容
嗨，我想知道如何在jumbotron内设置h1和p的位置。比方说，我想把我的h1放在jumbotron的左角，在h1下面，我想要p，但有一点左填充。
.jumbotron {
max-width: 100%;
padding-top: 80px;
padding-bottom: 80px;
color: inherit;
background-color: orange;
}
.jumbotron h1 {
position: relative;
display: block;
font-weight: bold;
font-size: 30px;
浏览 27提问于2017-02-01得票数 1
回答已采纳
我目前有一个网站，使用巨无霸功能，从自举从“如何使一个网站”教程。
在它中，它使用以下html：
<div class="jumbotron">
<div class="container">
<h1>Heading</h1>
<p>Tagline</p>
<a href="#About"><button type="button" class="
浏览 4提问于2014-12-01得票数 1
回答已采纳
我正在尝试将一段视频嵌入到引导程序的jumbotron中，但它并没有出现在我目前拥有的代码的任何地方。我遗漏了什么？
<section class="jumbotron text-center">
<video id="video-background" preload muted autoplay loop>
<source src="/images/vacation.mp4" type="video/mp4">
浏览 11提问于2019-08-11得票数 1
因此，我正在建立这个网站，它看起来像这样的pc网络大小：
当我调整窗口大小，使其变成手机大小的窗口(手机)时，巨型加速器变成了这样：
我的问题是，有没有办法在移动大小的巨型加速器之间添加一个空格？我不希望巨型加速器粘在一起，就像我在上面附加的图片一样。
到目前为止我的代码是html：
<div class="container col-12">
<div class="row">
<div class="col-md-6">
<div class
浏览 0提问于2020-08-20得票数 0
2回答
我想当我按下右上角的菜单按钮时，从左到右的全屏(完全高度和宽度)，其他的东西都会消失。这里的问题是，如果你向下滚动，然后点击菜单按钮，它不会显示它只显示在顶部。另外，还有一些我不太明白的东西，高度和宽度。如果我想要一些东西覆盖整个页面，或者仅仅是我们可以看到的高度和宽度，我们怎么做这样的事情？为此，我将100%的高度和宽度放在页面的可见部分，如果我们希望整个页面都被什么东西覆盖呢？高度和宽度是如何工作的？
$("#side-button").click(function(){
if ($("#side-bar").css("display"
浏览 3提问于2017-09-28得票数 0
回答已采纳
3回答
如何更改.jumbotron和.jumbotron中段落的字体权重？我不想我的font-weight这么大。
HTML：
<header>
<div class="container-fluid landing-page">
<div class="jumbotron vertical-center">
<h1>Embroider<span class="eze">eze</span></h1>
浏览 0提问于2018-05-31得票数 3
回答已采纳
我是新的HTML和CSS，并试图建立一个类似网页的东西。
请看截图。
正如您所看到的，我在Jumbotron中部署了几个引导按钮。我希望这些BTN当点击打开用户电子邮件客户端的形式，在一个目标空白的邮件操作。
我很想知道如何对此进行编码。
我的HTML
<div class="jumbotron">
<h1>Bespoke Recruitment Solutions</h1>
<p class="lead">We are an independant recruit
浏览 1提问于2016-02-16得票数 0
回答已采纳
我已经这样做了几个小时，尝试了所有的方法，但我就是不能让这些按钮移动。
我不确定如何重写CSS来做任何边际技巧。
我所需要的就是让jumbotron中的所有东西，文本和按钮组，都完美地居中。
<template name="Jumbotron">
<div class="jumbotron center">
<h1>Hello, world!</h1>
<p>Get Started Now</p>
<div class="btn-toolbar&
浏览 6提问于2015-11-19得票数 0
2回答
我有一个简单的背景图像与background-attachment:fixed;。在.jumbotron部分，我有一些内容，比如标题、子标题和按钮。我如何制作它，以便当我滚动时，.jumbotron内容保持在适当的位置，这样.jumbotron下面的内容就像在它上面移动一样。
我以前见过这种效果，但并不常见，所以我很难找到一个例子，我希望你能理解我的描述。
.jumbotron {
background-image: url(http://placekitten.com/1920/1080);
background-size: cover;
background-attachm
浏览 2提问于2016-06-09得票数 2
回答已采纳
1回答
当我进行移动大小时，我需要文本与提供的图像可读性。
#jumbotron-p {
font-weight: 600;
}
<div class="jumbotron text-center">
<h1 class="display-4">PATTERN</h1>
<p id="jumbotron-p">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptate consequuntur?
浏览 0提问于2019-05-03得票数 0
回答已采纳
1回答
这个方法适用于h1，但不适用于巨型加速器中的p，我也找不出原因。如果我调整浏览器的大小，使其小于500 h1，则更改为15 p，但p不会，并且保持在10 p？
@media(min-width:500px)
{
.jumbotron h1{
font-size: 40px;
margin-bottom: 20px;}
.jumbotron p{
font-size: 20px;
margin-bottom: 20px;}
}
和
.jumbotron h1 {font-size: 15px;}
.jumbotron p {
浏览 4提问于2014-06-05得票数 0
回答已采纳
2回答
我在firefox的投资组合网站上有一些不寻常的行为。我正在使用twitter的bootstrap.The文本按钮上的按钮是超出了按钮的宽度，也没有任何事情发生在点击按钮。它在镀铬和野生动物上工作得很好。
链接: www.nakibmomin.com
html
<div class="parallax-overlay"></div>
<div class="jumbotron" id="home">
<div class="container">
浏览 2提问于2015-01-12得票数 1
回答已采纳
1回答
我有一个vue组件Jumbotron.vue：
<template lang="html">
<div class="jumbotron" style="border-radius:0px; color:#fff;">
<div class="container">
</div>
</div>
</template>
和其他页面组件Main.vue：
<template>
<div class="root
浏览 2提问于2017-10-14得票数 15
回答已采纳
1回答
我在屏幕尺寸上有点问题。我使用Bootstrap做了很多事情。
图片如下：
Sass来源：`
body
background: $main-background
margin: 0
width: 100%
height: 100%
.footer
position: absolute
color: white
font-family: Arial
width: 100%
height: 100%
background-color: $plok-orange
background-repeat: no-repeat
ba
浏览 10提问于2018-12-14得票数 0
回答已采纳
我在使用css文件中的媒体查询来更改我的H1的字体大小时遇到了麻烦。
这是我的jumbotron代码：
<div class="jumbotron jumbotron-bike">
<h1>Get Going</h1>
<p>Jumpstart your startup with some crowdsourced
seed money, or support one of our 300,000,000+
creators and get rewards.</p>
<a clas
浏览 0提问于2018-04-30得票数 1
我有一个页面，上面有一个简单的Bootstrap Jumbotron：
<div class="jumbotron">
<div class="container">
<h1>My fancy map site</h1>
<p>Some stuff here</p>
<p><a href="somePage'" class="btn btn-primary btn-lg" rol
浏览 3提问于2014-03-28得票数 0
我正在尝试将这个段落标题移到我的h1上。我真的不明白如何合并位置函数。我已经尝试使用填充，但它不起作用。
好的，所以在图片中，我试图在"Boblo“下面找到”每个连接都重要的地方“。
底部是我的HTML代码
.jumbotron h1 {
text-align: left;
color: white;
font-size: 60px;
font-family: 'Shift', sans-serif;
font-weight: bold;
padding-top:20px;
padding-bottom:5px
}
.jumbotron
浏览 8提问于2015-10-15得票数 1
如何设置视频来填充整个巨型加速器作为背景，并使其具有响应性？
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pi
浏览 3提问于2017-10-28得票数 1
1回答
编辑：
我有一个由html创建的小叶地图：
<div id="map"></div>
还有一台巨型加速器
<div class="jumbotron">
<h1>Example Unit</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
&
浏览 6提问于2014-10-26得票数 0
1回答
我想知道侧边栏是否有可能是静态的，直到我在页面上滚动到达它为止？我希望它定位在Jumbotron之后，然后在向下滚动时粘在左侧和顶部。不是在像现在这样的一切之上，z索引，边际，偏移显然不起作用…… 我想知道这是否可能。 这是所有的代码，直到你把它像gitpod等弹出到你的IDE上才能工作。请复制。Demo 这里只有HTML / <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
浏览 46提问于2020-01-29得票数 0
1回答
我试着把一些文字放在有背景颜色的图像上，作为色调和不透明度。
我正在使用Bootstrap 4，有些类可能会覆盖其他类，但不是100%肯定。
这就是我目前的情况：
Index.cshtml
<div class="layer">
<div class="jumbotron jumbotron-fluid jumbotron-container resume-jumbotron text-white">
<div class="container-fluid jumbotron-content"
浏览 0提问于2020-04-13得票数 1
回答已采纳
4回答
对Bootstrap来说非常新，并且刚刚开始玩它。但是有一件事(这应该是非常明显的)就是我不能去工作。这改变了h1标签的颜色。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Hello WWW</title>
<link rel="stylesheet" href="main.css">
<!-- Latest compiled and minified CSS -->
<link rel=
浏览 4提问于2014-09-07得票数 2
回答已采纳
我想要两个文本框覆盖在bootstrap 4中标记为img-fluid的图像上。第一个文本框将在左上角，重叠图像约5%。另一个应该在右下角，重叠也在5%左右。
你可以在这里看到这个截图：
我尝试了几种解决方案，但都没有奏效...
下面是html代码：
<div class="jumbotron jumbotron-fluid jumbotron-no-padding">
<div class="jumbotron-img">
<div class="jumbotron-im
浏览 0提问于2017-06-25得票数 0
我是编程新手，正在努力熟悉html/css/bootstrap。这个
当我改变屏幕的大小时，我的"jumbotron“类中的元素不能正确地调整大小(所有元素都堆叠在一起)。点击这里查看：。如果将屏幕大小调整为较小的宽度，您将看到
元素才是。这也是它在手机上的表现。
下面是html：
<div class="jumbotron">
<div class="container">
<h1>Let us help you</h1>
<p><a href="http://www
浏览 4提问于2015-08-17得票数 1
2回答
<div class="jumbotron text-center" id="jumbotron">
<h1 class="display-3">Lorem Ipsum</h1>
<p class="lead">Lorem ipsum</p>
<hr class="my-y-2">
<p>################</p>
<form class="form-inline
浏览 0提问于2018-01-30得票数 0
回答已采纳
3回答
我正在建一个网页，登陆页面有两个入口。我想使用jombotrons作为门户。我想要两个巨无霸同时并排。我想，如果我把它们放进第二排，然后给它们上六级，这会给我想要的效果。但是，它们只是跨越页面，然后堆栈。任何帮助都将不胜感激。我对css和引导非常陌生。
<div class="row">
<div class="container">
<div class="jumbotron text-center col-mid-6">
<h1>Become Aw
浏览 6提问于2014-04-13得票数 1
回答已采纳
2回答
我是Bootstrap的新手，我见过在jumbotron部分有断点的网站，当窗口达到一定尺寸时，h1和p元素会自动减小它们的大小。
这是可行的，但是默认的h1和p大小对于我的网页来说太小了。
这是HTML：
<div class="jumbotron" id="page-header">
<div class="container">
<h1>日本語のクラブ</h1>
<p class="lead">Th
浏览 40提问于2015-04-13得票数 1
回答已采纳
我有一个非常简单的例子，一个引导巨型加速器分裂成两个部分。左边部分包含一些文本，右边部分包含一个图像：
<div class="jumbotron">
<div class="col-md-8"><h1><b>My WebSite Jumbotron!</b></h1>
<p>This page would be great if the jumbotron would be higher.</p>
</div>
<div cla
浏览 4提问于2014-06-07得票数 10
回答已采纳
我正在尝试使用图像作为我的巨型加速器的背景，但无法显示图像。我可以很好地更改jumbotron的其他属性，但不能找出我在背景图像上做错了什么。
这是我的html
<header>
<div class="jumbotron">
<div class="container">
<h1 class="display-3"> Large Text </h1>
<h1 class="disp
浏览 1提问于2016-09-29得票数 0
我是bootstrap的新手，创建了第一个主页，上面有一个大的jumbotron和3个水平对齐的列。所有的图片和文字都包含在下面。请参阅此处的代码：
<div class="jumbotron jumbotron-billboard">
<div class="img">
</div>
<div class="container">
<div class="content">
<h1>Text in ju
浏览 7提问于2017-05-27得票数 0
3回答
背景-图像未显示
、、
我正试图在<div class="jumbotron">上设置背景图像，但由于某种原因，这似乎是不可能的.图像不显示。
如果我用相同的代码在身体上设置背景图像，我会得到背景图像，而不是在巨型加速器中。
css：
.jumbotron {
background-image: url("/Img/banner.jpg");
background-repeat: no-repeat;
background: #808080;
color: #ffffff;
width: 80%;
max-height: 40
浏览 4提问于2016-01-01得票数 1
回答已采纳
2回答
我以这个HTML代码为例：
<body>
<div class="jumbotron">
<h1>Bootstrap Example</h1>
<p>Just another crazy blog</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is anot
浏览 1提问于2015-02-22得票数 1
回答已采纳
#particles-js{
background:rgba(0, 10, 14,.8);
height:100%;
position: absolute;
top:55px;
left:0;
width:100%;
min-height:700px;
background-size: cover;
background-position: center;
overflow: hidden;
}
#jumbotron{
margin: auto;
width: 700px;
/* position: fixed; */
/* z-i
浏览 2提问于2018-06-10得票数 0
1回答
我一直在试图找出为什么这些代码不绑定到类。在我所读过的所有未定义state属性的情况下，这都是由于缺少以下行：
this.someFunction = this.someFunction.bind(this);
但是我的代码包括了函数的行。然而，我提出了一个HTTP请求，我怀疑这些承诺正在抛出编译器，尽管代码与Axios 相同。
import React, { Component } from 'react';
import ReactDom from 'react-dom';
import logo from './logo.svg
浏览 0提问于2018-04-08得票数 0
回答已采纳
2回答
我想让车头杆碰一下巨无霸，但不确定怎么做。还有一个问题。头棒应该叫做导航棒还是没有区别？以下是我的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CherryPlaysRoblox1</title>
<link rel="stylesheet" type="text/css" href="
浏览 2提问于2016-10-27得票数 0
回答已采纳
1回答
我一直在与一个巨大的背景图像战斗，我设法在网站上正确地排队，但我似乎不能使它是移动响应。站点的链接是puremistdiffusers.com。
这里是HTML:
<div class="jumbotron" style="background-image: url(https://puremistdiffusers.com/wp-content/uploads/2017/02/slider-candle-jpeg-dark.jpg); background-repeat: no-repeat;">
<div class="co
浏览 4提问于2017-02-27得票数 0
我将.jumbotron类的不透明度设置为opacity: 0.9;，其子元素遵循。在这种情况下，如何设置特定的子元素来覆盖父元素的属性值。我试过使用!important、.jumbotron a、.jumbotron p + p、.jumbotron nth:child(3)，但是没有一个能完全工作。它将将按钮更改为小于0.9的较低的不透明度，但不是1，因为它应该是实心的，或者换句话说，显示不透明。还有别的办法来解决这个问题吗？下面是我尝试使用的焦点代码：
CSS:
.jumbotron{
background-color: white;
color:blac
浏览 4提问于2014-05-14得票数 1
我正在使用bootstrap设计一个网站，我的页面上有一个巨型加速器。
巨型加速器有一个背景图像。如何在悬停状态下淡入巨型加速器的当前背景图像？
意思是，如果我把光标放在巨型加速器上，另一个背景图像就会淡入，当我把光标移出巨型加速器时，上一张图片又回来了。
这是我的Jumbotron html：
<div class="jumbotron">
<div class="container">
<h1>Life is an Art.</h1>
<p style="font-size:
浏览 0提问于2015-04-16得票数 2
我有一台巨型加速器： ? 创建方式： <div class="col-sm-2">
<div class="jumbotron jumbotron-fluid top-space">
<div class="container">
<h1 class="display-6">Initiatives</h1>
<p class="lead">The other
浏览 21提问于2020-01-30得票数 0
Jubtotron的最小示例。左边和右边的填充消失了。
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>Now is the time for all good men to come to the aid of the party.</p>
</div>
它在文档中有填充。
浏览 0提问于2017-06-17得票数 1
回答已采纳
3回答
万宝坤的背景图像没有显示
、、、
我想在背景中显示图像，但它没有显示：
<div class="jumbotron jumbotron-fluid background: url('/assets/img/mhacks.jpg') no-repeat center center;">
<div class="container text-sm-center p-t-3">
<h1 class="display-2">Mona Jalal</h1>
<p class=&#
浏览 11提问于2016-06-15得票数 0
回答已采纳
由于某些原因，我的React组件没有读取我的CSS文件。这是我的React组件中的代码。
import React, { Component } from 'react';
import './Jumbotron.css';
class Jumbotron extends Component {
render() {
return (
<div className="Jumbotron jumbotron-fluid">
<div className="contai
浏览 2提问于2018-12-20得票数 0
回答已采纳
我正在尝试将我的样式表(styles.css)链接到index.html。当我使用Chrome的崇高文本构建函数时，HTML显示得很好，但没有链接到样式表(文本不是蓝色的)。当我将完全相同的代码(在相同的文件夹结构中)上传到BitBalloon时，链接就可以工作了。这是为什么，我如何使链接在这两种情况下工作？
index.html：
<!DOCTYPE HTML>
<html>
<head>
<title>I think I'm doing this right!</title>
<link rel=&#
浏览 7提问于2014-11-16得票数 5
回答已采纳
1回答
使用Bootstrap 3进行@media查询。在查看教程时，以下查询结构已多次出现。不过，我还是有问题。
最小宽度:1200 the正确呈现字体大小(92 the )和背景(红色)，最小宽度:992 the正确呈现字体大小(48 The)和背景(绿色)。
但是，当我低于这两个值时，最小宽度:768 to和最大宽度:768 to，它们的属性不应用于元素。感谢任何帮助！
@media(max-width:767px){
.jumbotron h1 {
font-size: 12px;
}
body {
b
浏览 0提问于2016-08-08得票数 3
2回答
所以我试着把我的巨型加速器和背景图像混在一起。我只想让文本可见，而不是巨型加速器本身的白色背景。我试着使用了background:none和background-color: transparent，但都无济于事。有人能帮上忙吗？
body, html {
height: 100%;
background-color: #fff;
}
.bg {
background-image: url("../images/home-office.jpg");
height: 100%;
background-position: center;
b
浏览 1提问于2020-02-22得票数 0
1回答
在桌面上，我喜欢导航条的外观，但是当调整到移动大小时，它会将自己推到标题下的垂直位置，但我希望它能够水平显示。
我已经尝试过显示不起作用的内联。
我知道如何使用媒体查询，但是我只需要帮助在标题下显示每个导航项。
document.body.classList.add('fade');
document.addEventListener("DOMContentLoaded", function(e) {
document.body.classList.remove('fade');
});
body {
opacity: 1;
t
浏览 3提问于2019-11-08得票数 0
回答已采纳
2回答
我的jsx文件成功地识别了react-bootstrap元素，但是没有对它们进行样式设置。我的项目的node-modules文件夹包含了react-bootstrap和bootstrap。为什么会发生这种情况？
var React = require('react');
var Button = require('react-bootstrap').Button;
var Jumbotron = require('react-bootstrap').Jumbotron;
var ReactComponentHi = React.createCl
浏览 0提问于2015-08-26得票数 5
我使用Bootstrap和模板引擎Thymeleaf作为前端，但是我似乎不能用我的内联CSS显示背景图像，我尝试了这个堆栈溢出问题的答案，这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1"/>
<title>Jumbotron</title>
</head>
<body>
<div th:fragment="jumbotron" >
<div class=
浏览 6提问于2017-12-29得票数 0
回答已采纳
1回答
目前，我有一个大型的设置与一些段落文本，我想坚持一个按钮下拉与文本内联。
下拉按钮
<span class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Button... <span class="caret"></span>
</button>
<ul class="d
浏览 1提问于2014-05-30得票数 2
回答已采纳
3回答
引用CSS中的类
、、
我刚刚在CSS中创建了一个连接到Bootstrap的Jumbotron
html代码
<div class="jumbotron">
<div class="container">
<div class="title">
<h1>My Title</h1>
</div>
<div class="subtitle">
<p>My Subt
浏览 0提问于2015-06-26得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
