Question

我在将<ul>屏幕与768px和992之间的屏幕对齐时遇到问题。我想将<ul>在div中对齐lg尺寸，在中心对齐较小尺寸。

我的代码是：

    <div class="col-lg-3 col-md-3 col-xs-12 header-logo">
        <ul id="loginList" class="nav navbar-nav header-login">
            <li><a href="#" style="padding: 0">Login</a> or <a href="#" style="padding: 0;">Create account</a></li>
        </ul>
    </div>

我使用bootstrap。

有谁知道如何在不同的屏幕尺寸上对齐<ul>？

Answer 1

您可以使用display：flex和justify-content flex-end / center for this

检查此代码段

@media screen and (min-width: 1200px) and (max-width: 2000px) {
  div.header-logo {
    display: flex;
    justify-content: flex-end;
    width: 100vw;
  }
  ul {}
}
@media screen and (min-width: 200px) and (max-width: 1200px) {
  div.header-logo {
    display: flex;
    justify-content: center;
    width: 100vw;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-3 col-md-3 col-xs-12 header-logo">
  <ul id="loginList" class="nav navbar-nav header-login">
    <li><a href="#" style="padding: 0">Login</a> or <a href="#" style="padding: 0;">Create account</a>
    </li>
  </ul>
</div>

希望这有帮助

Answer 2

由于课程navbar-nav，它有奇怪的行为。将其替换为navbar-default。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
	<div class="row text-center">
		<div class="col-lg-3 col-lg-push-9">
			<ul id="loginList" class="nav navbar-default">
				<li><a href="#" style="padding: 0">Login</a> or <a href="#" style="padding: 0;">Create account</a></li>
			</ul>
		</div>
	</div>
</div>

＆＃13;

对齐不同大小的ul

2 个答案: