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;但是当我调整页面大小时，它根本不适合移动设备。它看起来很糟糕，但我可以在正确的地方得到它。

任何人都可以帮我解决这个问题，以便我可以将文本放在三个文本标题下，当它调整大小时，它们都将保留在同一个块中并且从不移动但只是变小吗？

感谢所有帮助

举一个我想要的例子

Example

你看文字1文字2和文字3在那里然后p标签在下面。

Answer 1

好的，我已创建了您要求的内容，您应该查看CSS属性text-align和display

我创建了一个ul，其中包含三个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;
}

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

https://getbootstrap.com/components

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

Bootstrap定位不起作用

1 个答案: