Question

我正在使用Bootstrap 4，并且希望我的navbar-toggler在navbar-brand之前，例如this，但是如果我先将navbar-toggler放在首位，我的对齐方式就会一团糟。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar">
  <button class="navbar-toggler navbar-light" type="button" aria-expanded="True">
        <span class="navbar-toggler-icon"></span>
    </button>
  <a class="navbar-brand">
    <h1>????</h1>
  </a>
</nav>

JSFiddle。

谢谢

Answer 1

只需在.navbar-brand之后应用.mr-auto类。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar">
  <button class="navbar-toggler navbar-light" type="button" aria-expanded="True">
        <span class="navbar-toggler-icon"></span>
    </button>
  <a class="navbar-brand mr-auto">
    <h1>????</h1>
  </a>
</nav>

检出.mr-auto类：https://getbootstrap.com/docs/4.0/utilities/flex/

希望这会有所帮助：）

Answer 2

在引导程序4中，您可以添加边距/填充类以提供自动边距或填充。

从屏幕截图中，我认为您希望按钮和导航品牌都位于左侧。引导程序类为“ mr-auto”，该类用于将项目推向右侧，而具有此类的元素将向左对齐。

<a class="navbar-brand mr-auto">
    <h1>????</h1>
  </a>

这应该可以解决问题。

-完整代码-

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar">
  <button class="navbar-toggler navbar-light" type="button" aria-expanded="True">
        <span class="navbar-toggler-icon"></span>
    </button>
  <a class="navbar-brand mr-auto">
    <h1>????</h1>
  </a>
</nav>

Answer 3

您可以在style.css中进行尝试：

for var in l:
    filename = data_dir + "{}_dummy.nc".format(var)
    print("** Creating file: ", filename, " **")

    # copy file and open the new temp file
    copyfile(filename, data_dir + "temp.nc")
    ds = xr.open_dataset(data_dir + "temp.nc")

    # generate randomly from variable in another xarray object
    s.s_sum.values = np.random.choice(
        ds[var].values.flatten(), size=s.s_sum.values.shape
    )
    ds = s.copy()
    ds = ds.rename({"s_sum": var})

    ds.to_netcdf(filename, format="NETCDF3_CLASSIC")
    print("File Created!")

    # remove temporary file
    os.remove(data_dir + "temp.nc")
    print("Temporary Data Removed")

    del ds

Navbar-toggler弄乱了navbar-品牌定位

3 个答案: