Question

我正在构建一个非常简单的webApp（使用python flask），它将向用户显示一些图像。如何在子标题下正确显示图像？

当前

已执行

烧瓶应用返回的词典

images:{'fish': ['/images/fish/Jellyfish.jpg'], 
             'mammal': ['/images/mammal/Koala.jpg']}
            }

show.html

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Image Gallery</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <body>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Images</h1>
                </div>
                <hr>
{% if images %}     
                  {% for key,value in image.items() %}
                    <h4>{{key}}<h4>
                    <hr> 
                    {% for image_name in value %}
                    <div class="col-lg-3 col-md-4 col-xs-6 thumb">                  
                    <img class="img-responsive" src=" {{url_for('send_image', filename=image_name)}}"> 
<hr>                </div>
                   {% endfor %}{% endfor %}{% endif %}
            </div>
        </div>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </body>
</html>

Answer 1

我能够通过将<div class="row">移到{% for key,value in image.items() %} for循环中来修复它

更新了HTML

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Image Gallery</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <body>
        <div class="container">
            <div class="col-lg-12">
                <h1 class="page-header">Images</h1>
            </div>
            <hr>
            {% if images %}     
            {% for key,value in image.items() %}
            <div class="row">
                <h4>
                {{key}}
                <h4>
                <hr>
                {% for image_name in value %}
                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                    <img class="img-responsive" src=" {{url_for('send_image', filename=image_name)}}"> 
                    <hr>
                </div>
                {% endfor %}
            </div>
            {% endfor %}{% endif %}            
        </div>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    </body>
</html>

Answer 2

<div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Images</h1>
                </div>
                <hr>
{% if images %}     
                  {% for key,value in image.items() %}
                    <h4>{{key}}<h4>
                    <hr> 
                    {% for image_name in value %}
                    // have a condition here to check if its first image, then 
                     display it with a <div> tag.
                     if(first) {
                        <div class="col-lg-3 col-md-4 col-xs-6 thumb">                  
                    <img class="img-responsive" src=" {{url_for('send_image', 
                     filename=image_name)}}"> 
                       }
                    //end here
                    <div class="col-lg-3 col-md-4 col-xs-6 thumb">                  
                    <img class="img-responsive" src=" {{url_for('send_image', 
                       filename=image_name)}}"> 
<hr>                </div>
                   {% endfor %}{% endfor %}{% endif %}
            </div>
        </div>

这就是我要怎么做。希望这会有所帮助。

Answer 3

您可以尝试以下操作：在html中：

Row

在CSS中：

import { Row, Col, FormControl, Button, Collapse, Well } from 'react-bootstrap';

// ...

<Row>
  <Col lg={1} xs={1}>
    <Button
      id="btnSteps"
      className="ExpandCollapseButton"
      onClick={() => {}}  
    >
      {/* ... */}
    </Button>
    {/* ... */}
  </Col>
</Row>

如何在子标题下正确显示图像

3 个答案: