iT邦幫忙

0

boottrap navbar 放大縮小問題

大家好:
想請教有關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>

但我發現,我的內容無法並排了,即使把字體縮小也一樣,不知道該如何改善
附圖:
https://ithelp.ithome.com.tw/upload/images/20210308/20102983FH4MAXIzdl.png

<style>
/*myhome*/
nav{
	 
background: linear-gradient(to right, #ff6b24,#FFE53b);
}
  
</style> 

<nav class="navbar navbar-expand-xl 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 mr-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>
		</ul>
	 <div class=" text-dark pr-3  "   ><span > 您好</span></div>
<a class=" btn" href="logout.php"   ><i class="fas fa-sign-out-alt pr-3  "></i>登出</a>	 	
	 	</div>
</nav>

謝謝大大

1 個回答

3
listennn08
iT邦高手 7 級 ‧ 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>

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

看更多先前的回應...收起先前的回應...
神威 iT邦新手 1 級 ‧ 2021-03-08 11:52:03 檢舉

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

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

神威 iT邦新手 1 級 ‧ 2021-03-08 13:05:44 檢舉

listennn08

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

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

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

神威 iT邦新手 1 級 ‧ 2021-03-08 14:26:44 檢舉

listennn08有了,OK,謝謝大大

神威 iT邦新手 1 級 ‧ 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>

https://ithelp.ithome.com.tw/upload/images/20210308/20102983HUT807lgBs.png

神威 iT邦新手 1 級 ‧ 2021-03-09 11:21:59 檢舉

listennn08謝謝

我要發表回答

立即登入回答