html - Bootstrap 定位不起作用

Question

目前正在我的网站上工作并使用 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; 但是当我调整页面大小时它根本不适合移动设备。它看起来很糟糕，但我可以把它放在正确的地方。

谁能帮我解决这个问题，这样我就可以让文本位于三个文本标题下方，当它调整大小时，它们将全部停留在同一个 block 中，永远不会移动，只会变小？

谢谢大家的帮助

举例说明我想得到什么

Example

你看到 Text 1 Text 2 和 Text3 在那里然后 p 标签在下面。

Answer 1

好的，我已经创建了你所要求的，你应该看看 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