Question

很久以前，我已经使用bootstrap创建了一个项目，在其中将导航栏放置在容器中，使其宽度与内容相同。我没有对媒体查询做任何事情，并且设备上的导航栏是全角的，我喜欢。现在，我以相同的方式创建了一个新项目。桌面上的导航栏具有容器宽度，但是在设备上，它不像其他项目那样具有100％的宽度。

我尝试在使用！important的媒体查询中为.container设置100％的宽度。那没用

<style>
.header-block {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    min-height: 200px;
    display: block;
}
</style>
<div class="container">
            {% block header %}
                <div class="header header-block" style="background-image: url({{header_image}});">

                </div>
                <nav class="test-nav">
                    {% include "base/menu.twig" with {'menu': menu.get_items} %}
                </nav>
            {% endblock %}
        </div>

我想将导航栏保留在一个容器中，因为我不喜欢该项目中的全角导航。在其他设备（例如桌子/电话）上，我希望将其设置为全角。

Answer 1

public class Portfolio
{
    public string PortfolioName { get; set; }
    public string Description { get; set; }
    public string CreateID { get; set; }
    public string UpdateID { get; set; }

    public Portfolio(string portfolioName, string description, string createID, string updateID)
    {
        PortfolioName = portfolioName;
        Description = description;
        CreateID = createID;
        UpdateID = updateID;
    }
}

.header-block {
  background-image: url(https://www.w3schools.com/w3css/img_lights.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  min-height: 200px;
  display: block;
}

ul {
  list-style: none;
  color: white;
  display: flex;
  justify-content: space-evenly;
}

如何在设备上的容器中固定导航栏宽度？

1 个答案: