Question

例如，我有一个带有以下链接的导航栏：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">Register <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Login</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Business Owner's Learn More</a>
  </li>
  <li id="login" class="nav-item ">
    <a class="nav-link" href="#">Login</a>
  </li>
</ul>

所有这些当前都向左对齐，但是我想将#login链接放到右边，使用引导程序是否可以？我应该使用其他东西，例如弹性盒，网格等吗？

Answer 1

与CSS中的大多数内容一样，有很多方法可以做到这一点。对于初学者，您可以为#login赋予css属性float: right;。有关浮动here的更多信息。

另一种较新的方式是使用flexbox。在这种情况下，看起来就像在父级上添加display: flex;，然后是justify-content: space-between;。 Here's是Flexbox的绝佳指南。

Here's中有关通过Bootstrap方式对齐文本的堆栈溢出问题。

Answer 2

在ul上添加class UserUsertype(models.Model): user = models.OneToOneField( 'User', on_delete=models.DO_NOTHING, db_column='user_id', primary_key=True) user_type = models.ForeignKey( 'Usertype', on_delete=models.DO_NOTHING, db_column='user_type_id ') class Meta: db_table = 'user_userType' unique_together = (('user', 'user_type'),)类，在您要向右对齐的li上添加d-flex。

align-self-end

OR 将<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <ul class="navbar-nav mr-auto d-flex"> <li class="nav-item active"> <a class="nav-link" href="#">Register <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Login</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Business Owner's Learn More</a> </li> <li id="login" class="nav-item align-self-end"> <a class="nav-link" href="#">Login</a> </li> </ul>类添加到必填项

text-right

每个引导程序导航栏链接都可以单独隔开吗

2 个答案: