Bootstrap 4 - 响应式+居中& Word Wrapped navbar-品牌。

问题描述 投票：0回答：1

我一直在尝试制作一个bootstrap 4导航条，它有一个居中的导航条品牌（文本），标志在最左边，链接在右边，我已经设法做到这一点，它几乎是正确的，但我有一个大的品牌名称，因此我需要它的文本包装，当我去低于一定的宽度，但它的文本包装，而不是它的文本包装，它推其他元素的方式之前包装，我怎么能解决这个问题？

目前的代码。

.embelem{
    height:40px;
    width:40px;
}

@media (min-width: 768px) {
    .abs-center-x {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align:center;
    }
    #title {
        padding: 13px
    }
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
        <picture class="embelem">
          <source srcset="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp">
          <source srcset="https://lucas-testing.000webhostapp.com/images/embelem.png" class="embelem" alt="Embelem" type="image/png"> 
          <img src="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp">
        </picture>
        <a id="title" class="sticky-top navbar-brand abs-center-x text-wrap" style="color: #818181;" href="./">The City of Truro Mariners</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="./index">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./members page">Members page</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./contact us">Contact us</a>
            </li>
            <li class="nav-item dropdown" style="cursor:pointer">
              <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Extra's</a>
              <div id="dropdownSlider" class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="./release/index">App Download</a>
                <a class="dropdown-item" href="./links">Links</a>
                <a class="dropdown-item" href="./dates for the diary">Dates for the diary</a>
              </div>
            </li>
          </ul>
        </div>
  </nav>
html css twitter-bootstrap
1个回答
0
投票

把你的navbar-brand css替换成下面这段代码，然后去掉.text-wrap类，使其正常工作

.embelem{
  height:40px;
  width:40px;
}
.navbar-brand {
  padding-top: .3125rem;
  padding-bottom: .3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
  display: block;
  width: 50%;
  min-width: 1px;
}

@media (min-width: 768px) {
  .abs-center-x {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      text-align:center;
  }
  #title {
      padding: 13px
  }
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
        <picture class="embelem">
          <source srcset="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp">
          <source srcset="https://lucas-testing.000webhostapp.com/images/embelem.png" class="embelem" alt="Embelem" type="image/png"> 
          <img src="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp">
        </picture>
        <a id="title" class="sticky-top navbar-brand abs-center-x" style="color: #818181;" href="./">The City of Truro Mariners</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="./index">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./members page">Members page</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./contact us">Contact us</a>
            </li>
            <li class="nav-item dropdown" style="cursor:pointer">
              <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Extra's</a>
              <div id="dropdownSlider" class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="./release/index">App Download</a>
                <a class="dropdown-item" href="./links">Links</a>
                <a class="dropdown-item" href="./dates for the diary">Dates for the diary</a>
              </div>
            </li>
          </ul>
        </div>
  </nav>
1
投票

应用这些样式将对文本进行包装，而不会对其进行截断。

@media (max-width: 768px){
    .navbar-brand{
        flex: 1 0 100px;
        text-align: center;
    }
}


.embelem{
    height:40px;
    width:40px;
}

@media (max-width: 768px){
    .navbar-brand{
        flex: 1 0 100px;
        text-align: center;
    }
}
 
@media (min-width: 768px) {

    .abs-center-x {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align:center;
    }
    #title {
        padding: 13px
    }
}
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
        <picture class="embelem">
          <source srcset="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp">
          <source srcset="https://lucas-testing.000webhostapp.com/images/embelem.png" class="embelem" alt="Embelem" type="image/png"> 
          <img src="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp">
        </picture>
        <a id="title" class="sticky-top navbar-brand abs-center-x text-wrap" style="color: #818181;" href="./">The City of Truro Mariners</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="./index">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./members page">Members page</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./contact us">Contact us</a>
            </li>
            <li class="nav-item dropdown" style="cursor:pointer">
              <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Extra's</a>
              <div id="dropdownSlider" class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="./release/index">App Download</a>
                <a class="dropdown-item" href="./links">Links</a>
                <a class="dropdown-item" href="./dates for the diary">Dates for the diary</a>
              </div>
            </li>
          </ul>
        </div>
  </nav>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.