Question

我想使用Bootstrap制作类似楼梯的布局：

stair-like layout

为了构建这个，我使用下面的代码

static func showEvent(pageSize: UInt, lastPostKey: String? = nil, category: String? = nil,completion: @escaping ([Event]) -> Void) {
    //array that will hold events
    var currentEvents = [Event]()
    var currentEventKeys = [String]()
    //getting firebase root directory
    //create geofire ref to get current user location
    let geofireRef = Database.database().reference().child("userlocations")
    //create new geofire instance to actually pull event based off location
    //create geofire instance to handle the ref
    let geoFire = GeoFire(firebaseRef: geofireRef)
    let eventgeofireRef = Database.database().reference().child("eventlocations")
    let geoFire1 = GeoFire(firebaseRef: eventgeofireRef)

    //will get the location for of the current user from database
    //
    geoFire?.getLocationForKey(Auth.auth().currentUser?.uid, withCallback: { (location, error) in
        if (error != nil) {
            print("An error occurred getting the location for \"firebase-hq\": \(String(describing: error?.localizedDescription))")
        } else if (location != nil) {
                            print("Location for \(String(describing: Auth.auth().currentUser?.uid)) is [\(String(describing: location!.coordinate.latitude)), \(String(describing: location!.coordinate.longitude))]")
            //safely unwrapping user location
            guard let userLocation = location else{
                return
            }
            //will create a circle query to check for event keys within 600 meters of current user location
            let circleQuery = geoFire1?.query(at: userLocation, withRadius: 2.0)
            //will use that query to fetch results from database
            var queryHandle = circleQuery?.observe(.keyEntered, with: { (key: String!, location: CLLocation!) in
                //                    print("Key '\(key)' entered the search area and is at location '\(location)'")
                print(key)
                currentEventKeys.append(key)
                for currentKey in currentEventKeys {
                    EventService.show(forEventKey: currentKey, eventCategory: "Home", completion: { (event) in
                        currentEvents.append(event!)
                        completion(currentEvents)
                    })
                }
            })
            circleQuery?.observeReady({
                print("All initial data has been loaded and events have been fired!")
                circleQuery?.removeAllObservers()
            })
        } else {
            print("GeoFire does not contain a location for \"firebase-hq\"")
        }
    })        
}

我知道这不起作用，但是如何使用Bootstrap进行这种布局呢？

Answer 1

你的意思是这样吗？

＆＃13;

img {
    float: left;
}

＆＃13;

<html>
<head>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p>
<img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla vehicula arcu, vitae eleifend purus dictum sit amet. Etiam sollicitudin quis nunc id tempor. Aenean nunc mauris, varius ut turpis tempus, pretium egestas diam. In nunc quam, laoreet ut ex in, egestas finibus enim. Pellentesque accumsan vehicula semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque dolor tortor, fermentum et sollicitudin in, pharetra eget odio. Aenean eget erat ante. Proin libero erat, tincidunt non posuere non, facilisis non enim. Praesent a dignissim ex. Phasellus viverra nec velit at tincidunt. Pellentesque lorem lectus, molestie vitae turpis a, dignissim aliquam dolor. Suspendisse consectetur, sapien non feugiat semper, ipsum lacus consectetur ligula, id laoreet ligula velit a lorem. Maecenas ac ante urna. Phasellus vitae mi nec tortor luctus viverra sed sit amet arcu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla vehicula arcu, vitae eleifend purus dictum sit amet. Etiam sollicitudin quis nunc id tempor. Aenean nunc mauris, varius ut turpis tempus, pretium egestas diam. In nunc quam, laoreet ut ex in, egestas finibus enim. Pellentesque accumsan vehicula semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque dolor tortor, fermentum et sollicitudin in, pharetra eget odio. Aenean eget erat ante. Proin libero erat, tincidunt non posuere non, facilisis non enim. Praesent a dignissim ex. Phasellus viverra nec velit at tincidunt. Pellentesque lorem lectus, molestie vitae turpis a, dignissim aliquam dolor. Suspendisse consectetur, sapien non feugiat semper, ipsum lacus consectetur ligula, id laoreet ligula velit a lorem. MadfsgsdgsdfgsdfgsdgsdfgPellentesque dolor tortor, fermentum et sollicitudin in, pharetra eget odio. Aenean eget erat ante. Proin libero erat, tincidunt non posuere non, facilisis non enim. Praesent a dignissim ex. Phasellus viverra nec velit at tincidunt. Pellentesque lorem lectus, molestie vitae turpis a, dignissim aliquam dolor. Suspendisse consectetur, sapien non feugiat semper, ipsum lacus consectetur ligula, id laoreet ligula velit a lorem. Madfsgsdgsdfgsdfgsdgsdfg
</p>
</body>
</html>

＆＃13;

我可以使用Bootstrap制作楼梯布局吗？

1 个答案: