Question

我尝试使用twitter-bootstrap中的表创建复杂的布局。但是，我无法完全正确地完成它！特别是，显示5的地方！

是否可以使用div来实现相同的目标？在这种情况下，我如何获得边界？请检查附带的设计。

<div class="container">
            <table class="table table-bordered" style="width:80%">
                <tr>
                    <td class="col-md-6" colspan="4"><strong>1</strong></td>
                    <td class="col-md-4" rowspan="3"><img src="#" /></td>
                    <td class="col-md-2" rowspan="3"><button class="del-icon">X</button></td>
                </tr>
                <tr>
                    <td class="col-md-3"><strong>2</strong></td>
                    <td class="col-md-3"><strong>3</strong></td>
                </tr>
                <tr>
                    <td><strong>4</strong></td>
                    <td><strong>5</strong></td>
                </tr>
            </table>
        </div>

Answer 1

是的，有可能，您只需将行添加到2,3然后将另一行添加到4,5

import React, { Component } from 'react';
import { AsyncStorage } from 'react-native';
import { Scene, Router } from 'react-native-router-flux';
import Login from './login_component';
import Home from './home_component';

var KEY = 'isLIn';

export default class main extends Component {
  state = {
    isLoggedIn: false
  };

  componentWillMount() {
    this._loadInitialState().done();
  }

  _loadInitialState = async () => {
    try {
        let value = await AsyncStorage.getItem(KEY);
        if (value !== null && value === 'true') {
          this.setState({ isLoggedIn: true });
        } else {
          this.setState({ isLoggedIn: false });
        }
    } catch (error) {
      console.error('Error:AsyncStorage:', error.message);
    }
  };

  render() {
    const _isIn = (this.state.isLoggedIn===true) ? true : false;
    return (
        <Router>
          <Scene key="root" hideNavBar hideTabBar>
            <Scene key="Signin" component={Login} title="Signin" initial={!_isIn} />
            <Scene key="Home" component={Home} title="Home" initial={_isIn}/>
          </Scene>
        </Router>
    );
  }
}

Bootply：http://www.bootply.com/mraM3WKCvt

希望有所帮助，cheerio！

需要使用twitter / bootstrap纠正这种复杂的网格/表格布局

1 个答案: