boottrap navbar 放大縮小問題

boottrap css html

神威 2021-03-08 10:29:01 ‧ 1576 瀏覽

大家好:
想請教有關navbar的問題，
我navbar用網頁版很OK，

但我手機板希望bar的內容不要縮起來，所以我把這行拿掉，也OK了

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded=	"false" aria-label="Toggle navigation">
	<span class=" navbar-toggler-icon"></span>
	</button>

但我發現，我的內容無法並排了，即使把字體縮小也一樣，不知道該如何改善
`
/myhome/
nav{

background: linear-gradient(to right, #ff6b24,#FFE53b);
}

<div class="  navbar-collapse mt-3" id="navbarSupportedContent"  ><a href="index.php"  ><img src="images/012.png" width="60"  height="60" /></a> 
	<ul class="navbar-nav mr-auto">
		<li class="nav-item myactive dropdown">

home

search

您好
登出

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

listennn08

iT邦高手 5 級 ‧ 2021-03-08 10:55:42

最佳解答

.navbar-collapse {
  display: flex;
  flex-wrap: nowrap;
}

.navbar-nav {
  flex-direction: row;
}

<nav class="navbar navbar-expand-sm bg-transparent navstyle" id="navbar" >
  <div class="navbar-collapse mt-3" id="navbarSupportedContent">
    <a href="index.php"  >
      <img src="images/012.png" width="60"  height="60" />
    </a> 
    <ul class="navbar-nav ml-md-auto">
      <li class="nav-item myactive dropdown">
        <a class="nav-link" id="navbardrop" href="test1.php">
          home
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link" id="navbardrop" href="search.php">
          search
        </a>
      </li>
      <li class="nav-item">
        <div class="px-sm-2 py-2">
            您好
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link text-dark" href="logout.php">
          <i class="fas fa-sign-out-alt pr-1"></i>登出
        </a>
      </li>
    </ul>
  </div>
</nav>

手機板我覺得並排看起來是有點擠

回應 8
分享
檢舉

看更多先前的回應...收起先前的回應...

神威 iT邦研究生 4 級 ‧ 2021-03-08 11:52:03 檢舉

請問，我該怎樣將空隙改小一點呢?謝謝

listennn08 iT邦高手 5 級 ‧ 2021-03-08 12:00:33 檢舉

在 nav-link 加上新的 class px-sm-0

神威 iT邦研究生 4 級 ‧ 2021-03-08 13:05:44 檢舉

listennn08

<a class="nav-link px-sm-0" id="navbardrop" href="search.php" >

是這樣嗎?可是還是一樣耶

listennn08 iT邦高手 5 級 ‧ 2021-03-08 13:36:24 檢舉

那打開 f12 看看是 padding 還是 margin 的間距再去調

神威 iT邦研究生 4 級 ‧ 2021-03-08 14:26:44 檢舉

listennn08有了，OK，謝謝大大

神威 iT邦研究生 4 級 ‧ 2021-03-08 16:02:15 檢舉

listennn08不好意思，能不能再請教一個問題，
我的table設定可以左右滑動，請問我的滑動軸能不能設定顏色呢，感謝

.scrollme {
    overflow-x: auto;
}
<div class='scrollme' style=''>
 <table class='table table-bordered text-center max table-responsive'>
 </table>
 </div>