Question

我有一个照片库的标准循环，我正在使用 twitter-bootstrap col-xs-12 col-sm-6 col-md-4 col-lg-3，它在桌面上为我提供了4张图片，缩小为一张照片移动。

这一切都很好。

令我烦恼的一件事是，我希望单张照片在移动设备上查看时，在页面上居中对齐，但它们都是左对齐的。

所以这是我正在做的一些基本伪：

<div class="container">
    <div class="row">
        <?php
        foreach ($photos AS $photo) {
        ?>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <img src="pathtoimage">
        </div>
        <?php
        }
        ?>
    </div>
</div>

同样，实际的循环部分，以及横跨的四个整体完美地工作，我只是停留在如何获取移动视图（col-xs-12 ）以页面中间为中心，而不是左对齐。

有人知道引发这种情况的引导魔法是什么吗？

Answer 1

您可以使用一些CSS将图像居中。我创建了一个fiddle

如果您希望图像居中，只需添加某些断点，而不是使用媒体查询将它们置于特定断点的中心位置。

例如，仅在小屏幕上显示图像：

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page import ="java.sql.*" %>




<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Book Ticket</title>
</head>

<body background="http://www.teamarking.com/barcode/bar_background.jpg"> 
<form method="post" action="reservations.jsp">


    <center>    
        <form action='cancel.jsp'><input type='hidden' name='cancel' value='Cancel Reservation'></form>

        <table border="1" width="30%" height="30%">
            <tr>
                <th><font color='#D18603'>ActivityID</font></th>
                <th><font color='#D18603'>Username</font></th>                  
                <th><font color='#D18603'>Ticket</font></th>
                <th><font color='#D18603'>Cancel</font></th>
                <th><font color='#D18603'>Update</font></th>

            </tr>




            <%
                Class.forName("org.apache.derby.jdbc.ClientDriver").newInstance();
                Connection con = DriverManager.getConnection("jdbc:derby://localhost:1527/users", "users", "123");
                String username = (String) request.getSession().getAttribute("username");
                Statement st = con.createStatement();
                ResultSet rs;
                rs = st.executeQuery("select * from reservation where username='" + username + "'");
                while (rs.next()) {

                    String ActivityID = rs.getString("id");
                    username = rs.getString("username");
                    String buy = rs.getString("buy");

                    out.println("<tr>");
                    out.println("<td>" + ActivityID + "</td>");
                    out.println("<td>" + username + "</td>");
                    out.println("<td>" + buy + "</td>");
                    out.println("<td><b><form action='cancel.jsp'><input type='submit' name='cancel' value='Cancel Reservation'><input type='hidden' name='activityID' value='"+ActivityID+"'></form></b>");
                    out.println("<td><b><form action='update.jsp'><select name='update'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select><input type='submit' value='Update'><input type='hidden' name='buy' value='"+buy+"'></form></b>");

                    out.println("</tr>");

                }

                st.close();

            %>

    </center>
</table>


<br><a href='success.jsp'>Back</a>

<br><br><a href='logout.jsp'>Log out</a>


</form>
</body>
</html>

Answer 2

使用text-center类来居中图像

“col-xs-12 col-sm-6 col-md-4 col-lg-3”与col-xs-12页面中心

2 个答案: