Question

我希望导航栏的底部分隔符与页面的其余部分对齐。就像重构UI一样here

但是，当我在导航栏内的容器中添加边框时，边框会扩展到so之类的内容之外。

<nav class="navbar navbar-expand-lg">
  <div class="container" style="border-bottom: 3px solid blue;">
    <a class="navbar-brand" href="/index...

我可以在navbar-element外部添加一个容器，并在其中添加一个<hr>元素，但这似乎是一种不好的做法。

向导航栏添加水平分隔符以与页面其余部分的内容对齐的一种优雅且“正确”的方法是什么？

Answer 1

如果您添加一个row元素并为其添加样式，而不是向您的container添加样式，则可以解决您的问题。

示例：

<nav class="navbar navbar-expand-lg">
  <div class="container">
    <div class="row" style="border-bottom: 3px solid blue;">
      <a class="navbar-brand" href="/index...

row的左侧和右侧将填充15px。由于div已嵌套，因此应该减小border-bottom的宽度。

选项二（不更改其下方元素的布局）：

<div class="container">
    <div class="row" style="border-bottom: 3px solid blue;"></div>
        <a class="navbar-brand" href="/index...

或者您可以使用自定义样式<hr>，但该选项没有任何问题。

Answer 2

您应该在nav标签而不是其他分区处进行操作，因为这样做可以同时更改所有内容和导航的页边距，并以相同的方式对齐。

pygame.init()
screen = pygame.display.set_mode([500,500])

def response1(): #callback function when button 1 is pressed
    print("Button 1 pressed")

def response2(): #callback function when button 2 is pressed
    print("Button 2 pressed")

def main(buttons):
    while True: #setting a variable to True is unnecessary as you can just use "break" to exit the loop.
    #this is only not the case in rare cases

        screen.fill((255,255,255)) #unneccessary to put in another function

        for event in pygame.event.get(): #only 1 event loop required
            if event.type == pygame.QUIT:
                pygame.quit()
                sys.exit()

            elif event.type == pygame.MOUSEBUTTONDOWN:
                for button in buttons: 
                    if button["button"].hover(pygame.mouse.get_pos()):
                        button["func"]() #calls function if clicked on

        for button in buttons: #draws all buttons in array, can be optimised to not occur when user clicks
            button["button"].draw(screen, pygame.mouse.get_pos())

        pygame.display.flip() #update the surface at the end of the loop instead of the beginning
    #only use pygame.display.update(rect=None) to update a specific portion of the display, otherwise stick to flip()

if __name__ == "__main__": #if file is not a module
    button1 = Button([130, 200, 90, 100], text="Press")
    button2 = Button([280, 200, 90, 100], text="Me", default_colour=(255,255,0))

    buttons = [ #array of dicts to store buttons and callback functions, for multiple buttons
        {
         "button": button1,
         "func": response1
        },
        {
         "button": button2,
         "func": response2
        }
    ]

    main(buttons)

.content
{
margin:10px;
}

将导航栏的底部边框与内容对齐

2 个答案: