Question

我正在尝试使用 bootstrap 4.0 用grid system和row来实现col，但是我遇到了问题。

如果我使用<div>标签，则到目前为止一切正常：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
	<div class="col-2 text-left">
	left
	</div>
	<div class="col-8 text-center">
	main title
	</div>
	<div class="col-2 text-right">
	right
	</div>
    </div>
</div>

然后我尝试通过输入切换按钮在nav标签中实现以上逻辑。但这看起来很杂乱（不是对称的）：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-dark bg-dark text-white">
    <div class="row">
	<div class="col-2 text-left">
	    <button class="navbar-toggler" type="button" id="menu-toggle">
	   	    <span class="navbar-toggler-icon"></span>
	    </button>
	</div>
	<div class="col-8 text-center">
	main title
	</div>
	<div class="col-2 text-right">
        right
	</div>
    </div>
</nav>

我该如何解决？

Answer 1

只需将display: block添加到导航

nav{
display:block;
}

因为导航栏类将显示更改为flex。

<nav class="d-block">

Answer 2

看看下面的代码：

drop table if exists #Transactions

create table #Transactions (TID int, amt int)

insert into #Transactions values(1, 100)
insert into #Transactions values(1, -50)
insert into #Transactions values(1, 100)
insert into #Transactions values(1, -100)
insert into #Transactions values(1, 200)


;WITH y AS 
(
  SELECT TID, amt, rn = ROW_NUMBER() OVER (ORDER BY TID)
    FROM #Transactions
), x AS
(
    SELECT TID, rn, amt, rt = amt
      FROM y
      WHERE rn = 1
    UNION ALL
    SELECT y.TID, y.rn, y.amt, x.rt + y.amt
      FROM x INNER JOIN y
      ON y.rn = x.rn + 1
)
SELECT TID, amt, RunningTotal = rt
  FROM x
  ORDER BY x.rn
  OPTION (MAXRECURSION 10000);

Answer 3

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-dark bg-dark text-white row">
   
	<div class="col-2 text-left">
	    <button class="navbar-toggler" type="button" id="menu-toggle">
	   	    <span class="navbar-toggler-icon"></span>
	    </button>
	</div>
	<div class="col-8 text-center">
	main title
	</div>
	<div class="col-2 text-right">
        right
	</div>
    
</nav>

如何在<nav>标签内使用网格系统？

3 个答案: