Bootstrap定位不起作用(Bootstrap positioning not working)

刚刚正在我的网站上工作并使用bootstrap来帮助我，因为我被告知这是一个很好的框架。无论如何，我目前在将标题放入标题并将其定位在正确位置时遇到问题。

我的HTML代码：

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class = "Text"> <a class="navbar-brand" href="#"> <h1>Text1</h1> <h2>Text2</h2> <h3>Joruney</h3> <p>Starting to work around here</p> </a> </div> </div> <div class="navbar-collapse collapse"> <ul class = "nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Text<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Text1</a></li> <li><a href="#">Text2</a></li> <li><a href="#">Text3</a></li> </ul> </li> <li><a href="#contact" data-toggle="modal">Contact</a></li> </ul> </div> </div> </div>

CSS：

.navbar-default { background-color: #760003; padding: 30px; } .Text h1 { font-family: "Times New Roman", Georgia, Serif; font-size: 59px; margin-top: -30px; float: left; padding-left: 10px; } .Text h2 { font-family: "Times New Roman", Georgia, Serif; font-size: 65px; margin-top: 7px; margin-bottom: -25px; margin-top: -22px; padding-right: 6px; float: left; } .Text h3 { font-family: "Times New Roman", Georgia, Serif; font-size: 44px; margin-top: -17px; padding-top: 0px; float: left; } .Text p{ font-family: 'Open Sans', sans-serif; font-size: 16px; margin-top: 35px; float: left; }

所以我试图让它看起来像：

Text1 Text2 Text 3 Starting to work around here

然而它实际上看起来像是：

Text1 Text2 Text3 Starting to work around here

我不能让p标签移动到它下面。现在我尝试使用position: absolute; 然而，当我调整页面大小时，它根本不适合移动设备。它看起来很糟糕，但我可以在正确的地方得到它。

任何人都可以帮助我解决这个问题，以便我可以让文本在三个文本标题下，当它调整大小时，它将全部停留在同一个块中，永远不会移动但只是变小？

谢谢你的帮助

举一个我想要得到的例子

例

你看到文本1文本2和文本3，然后p标签在下面。

Just currently working on my site and using bootstrap to help me as i was told it was a great framework to use. Anyway i am currently having a problem putting text in the header and positioning it in the right place.

My html code:

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class = "Text"> <a class="navbar-brand" href="#"> <h1>Text1</h1> <h2>Text2</h2> <h3>Joruney</h3> <p>Starting to work around here</p> </a> </div> </div> <div class="navbar-collapse collapse"> <ul class = "nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Text<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Text1</a></li> <li><a href="#">Text2</a></li> <li><a href="#">Text3</a></li> </ul> </li> <li><a href="#contact" data-toggle="modal">Contact</a></li> </ul> </div> </div> </div>

CSS:

.navbar-default { background-color: #760003; padding: 30px; } .Text h1 { font-family: "Times New Roman", Georgia, Serif; font-size: 59px; margin-top: -30px; float: left; padding-left: 10px; } .Text h2 { font-family: "Times New Roman", Georgia, Serif; font-size: 65px; margin-top: 7px; margin-bottom: -25px; margin-top: -22px; padding-right: 6px; float: left; } .Text h3 { font-family: "Times New Roman", Georgia, Serif; font-size: 44px; margin-top: -17px; padding-top: 0px; float: left; } .Text p{ font-family: 'Open Sans', sans-serif; font-size: 16px; margin-top: 35px; float: left; }

So i am trying to ahive by getting it to look like:

Text1 Text2 Text 3 Starting to work around here

However what its actually looking like is:

Text1 Text2 Text3 Starting to work around here

I cant get the p tag to move under it. Now i tried to use position: absolute; however when i resize the page its not mobile friendly at all. It looks awful but i can get it in the right place.

Could anyone help me with this problem so that i can get the text to go under the three text headers and when it resizes it will all stay in that same block and never move but just get smaller?

Thanks for all the help

To give an example of what i was trying to get

Example

U an see Text 1 Text 2 and Text3 are there and then the p tag is below.

最满意答案

好的，我已经创建了你要求的内容，你应该看一下CSS属性text-align和display

我用三li创建了一个ul

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class = "Text"> <a class="navbar-brand" href="#"> <ul> <li>test</li> <li>test</li> <li>test</li> </ul> <h6>This is below</h6> </a> </div> </div> <div class="navbar-collapse collapse"> <ul class = "nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Text<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Text1</a></li> <li><a href="#">Text2</a></li> <li><a href="#">Text3</a></li> </ul> </li> <li><a href="#contact" data-toggle="modal">Contact</a></li> </ul> </div> </div> </div>

CSS ：

.navbar-default { background-color: #760003; padding: 20px; } .Text ul { font-size: 20px; margin-top: -30px; margin-left: 0; margin-bottom: 0; list-style: none; padding: 0; text-align: center; } .Text ul li { display: inline-block; } .Text h6 { margin-top: 0; font-size: 26px; text-align: center; }

这样做非常快，让您了解如何操作，您应该查看Bootstrap文档并了解CSS定位

https://getbootstrap.com/components

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Okay I have created what you have asked for, you should look at the CSS properties text-align and display

I have created a ul with three li

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class = "Text"> <a class="navbar-brand" href="#"> <ul> <li>test</li> <li>test</li> <li>test</li> </ul> <h6>This is below</h6> </a> </div> </div> <div class="navbar-collapse collapse"> <ul class = "nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Text<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Text1</a></li> <li><a href="#">Text2</a></li> <li><a href="#">Text3</a></li> </ul> </li> <li><a href="#contact" data-toggle="modal">Contact</a></li> </ul> </div> </div> </div>

CSS:

.navbar-default { background-color: #760003; padding: 20px; } .Text ul { font-size: 20px; margin-top: -30px; margin-left: 0; margin-bottom: 0; list-style: none; padding: 0; text-align: center; } .Text ul li { display: inline-block; } .Text h6 { margin-top: 0; font-size: 26px; text-align: center; }

This was done very fast to give you an idea of how to do it, you should look at the Bootstrap Documentation and learn about the CSS positioning

https://getbootstrap.com/components

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

更多推荐