证明内容块引导程序4

时间:2019-01-06 12:12:28

标签: html css twitter-bootstrap bootstrap-4

我有此代码:

.banner {
  background: #f9f9f9;
  width: 300px;
  height: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<section class="banners mb-4">
      <div class="container">
        <div class="d-flex justify-content-between">
            <div class="banner"></div>
            <div class="banner"></div>
            <div class="banner"></div>
        </div>
      </div>
</section>

我需要在移动设备和平板电脑上显示:以空格隔开这些元素banner。我如何用flex做到这一点?现在,我可以在线获取元素。

2 个答案:

答案 0 :(得分:0)

基于视口,您可以使用此d-* classes

所以

<div class="d-flex justify-content-between">

将会

<div class="d-lg-flex justify-content-between">

这将使.banner块(div的默认行为)直到大视口为止

答案 1 :(得分:0)

您可以在小屏幕(https://getbootstrap.com/docs/4.2/utilities/flex/#direction)上更改方向

import pygame, random
class SpaceshipClass(pygame.sprite.Sprite):
    def __init__(self):
        pygame.sprite.Sprite.__init__(self)
        self.image = pygame.image.load("spaceship.png")
        self.rect = self.image.get_rect()
        self.rect.center = [320, 420]

class ObstacleClass(pygame.sprite.Sprite):
    def __init__(self, image_file, location, type):
        pygame.sprite.Sprite.__init__(self)
        self.image_file = image_file
        self.image = pygame.image.load(image_file)
        self.rect = self.image.get_rect()
        self.rect.center = location
        self.type = type
        self.passed = False

    def update(self):
        global speed, travelled
        self.rect.centery += speed[1]
        travelled+=0.1
        if self.rect.centery>700:
            self.kill()

def create_map():
    global obstacles
    locations = []
    for i in range(10):
        row = random.randint(0, 9)
        col = random.randint(0, 9)
        location = [col * 64 + 32, row * 64 + 32 + -640]
        if not (location in locations):
            locations.append(location)
            type = random.choice(["rock", "point"])
            if type == "rock": 
                img = "obstacle.png"
            elif type == "point": 
                img = "coin.png"
            obstacle = ObstacleClass(img, location, type)
            obstacles.add(obstacle)
def animate():
    screen.fill([0, 0, 0])
    obstacles.draw(screen)
    screen.blit(ship.image, ship.rect)
    screen.blit(score_surf, score_pos)
    dis_surf=dis_font.render((string_dis + str(("%.2f")%travelled)+metres), 
    1, (255, 255, 255))
    screen.blit(dis_surf, dis_pos)
    pygame.display.flip()
pygame.init()
screen = pygame.display.set_mode([640,640])
clock = pygame.time.Clock()
points = 0
lives=3
speed = [0, 1]
ship= SpaceshipClass()
obstacles = pygame.sprite.Group()
create_map()
map_position = 0
travelled=0
string_dis="distance traveled: "
metres="m"
dis_font=pygame.font.Font(None, 50)
dis_surf=dis_font.render((string_dis + str(travelled)+metres), 1, (255, 
255, 255))
dis_pos=[10, 40]
score=0
string_score="Score: "
score_font=pygame.font.Font(None, 50)
score_surf=score_font.render((string_score + str(score)), 1, (255, 255, 
255))
score_pos=[10, 10]
done=False
running=True
while running:
    clock.tick(180)
    for event in pygame.event.get():
        if event.type==pygame.QUIT:
            running=False
        elif event.type==pygame.MOUSEMOTION:
            ship.rect.centerx=event.pos[0]
    if not done:
        map_position += speed[1]
        if map_position >= 640:
            create_map()
            map_position = 0
        obstacles.update()
        animate()
    for i in range(lives+1):
        width=screen.get_width()
        health=pygame.image.load("health.png")
        screen.blit(health, [width-30*i, 20])
        pygame.display.flip()    
    col=pygame.sprite.spritecollide(ship, obstacles, False)
    if col:
        if col[0].type=="rock" and not col[0].passed:
            lives-=1
            if lives==0:
                final_text1="Game Over!"
                final_text2=("Your Score is: "+ str(score))
                final_text3=("you traveled %.2f meters" %travelled)
                ft1_font=pygame.font.Font(None, 70)
                ft1_surf=ft1_font.render(final_text1, 1, (255, 255, 255))
                ft2_font=pygame.font.Font(None, 50)
                ft2_surf=ft2_font.render(final_text2, 1, (255, 255, 255))
                ft3_font=pygame.font.Font(None, 50)
                ft3_surf=ft3_font.render(final_text3, 1, (255, 255, 255))                
                screen.blit(ft1_surf, [screen.get_width()/2- 
                ft1_surf.get_width()/2, 100])
                screen.blit(ft2_surf, [screen.get_width()/2- 
                ft2_surf.get_width()/2, 200])
                screen.blit(ft3_surf, [screen.get_width()/2- 
                ft3_surf.get_width()/2, 300])
                pygame.draw.rect(screen, [0,0,0], [width-30, 20, 90, 90], 
                0)
                pygame.display.flip()
                done=True

            else:
                pygame.time.delay(1000)
                ship.image = pygame.image.load("spaceship.png")
                speed = [0, 1]
                col[0].passed = True
        elif col[0].type=="point" and not col[0].passed:
            score+=100
            score_surf=score_font.render((string_score + str(score)), 1, 
            (255, 255, 255))
            screen.blit(score_surf, score_pos)
            col[0].kill()
            pygame.display.flip()
pygame.quit()
.banner {
  background: red;
  border:1px solid;
  min-height: 60px;
}