Question

大屏幕上.grid-container的默认宽度是多少？如何更改它并使其更大？这样做的正确方法是什么？

Answer 1

只需打开您的＆＃34; _settings.scss ＆＃34;文件，运行到第2节＆＃34; 断点＆＃34; （第103行）并根据需要编辑像素值。

＆＃13;

import React, { Component } from 'react';
import {
  Animated,
  Platform,
  StatusBar,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight,
} from 'react-native';
var AWS = require('aws-sdk/dist/aws-sdk-react-native');
const FBSDK = require('react-native-fbsdk');
const {
  LoginButton,
  AccessToken
} = FBSDK;

var Login = React.createClass({
  render: function() {
    return (
      <View>
        <LoginButton
          publishPermissions={["publish_actions"]}
          onLoginFinished={
            (error, result) => {
              if (error) {
                alert("Login failed with error: " + result.error);
              } else if (result.isCancelled) {
                alert("Login was cancelled");
              } else {
                alert("Login was successful with permissions: " + result.grantedPermissions)
                 AccessToken.getCurrentAccessToken().then(
              (data) => {
                AWS.config.region = 'us-east-1';
                 AWS.config.credentials = new AWS.CognitoIdentityCredentials({
                IdentityPoolId: 'us-east-xxxxxxxxxxxxxxxxxxxxxx',
                Logins: {
                'graph.facebook.com': data.accessToken.toString()
                        }    
                         },
                         alert(data.accessToken.toString()) // I am able to see the access token so I know i am getting it succesfully
                         );
              }
            )


              }
            }
          }
          onLogoutFinished={() => alert("User logged out")}/>
      </View>
    );
  }
});

export default class App extends Component {
  render() {
    return (
      <View>
        <Text>Welcome to the Facebook SDK for React Native!</Text>
        <Login />
      </View>
    );
  }
}

＆＃13;

Answer 2

这是一个更快速的解决方案，而不会弄乱设置：

/**
* Change container size on xxlarge screen.
*/
@media screen and (min-width: 90em) {
    .grid-container {
        max-width: 85rem;
    }
}

Answer 3

.grid-container的默认宽度在_settings.css文件中定义。在“ Xy网格”部分中对其进行检查：

// 56. Xy网格

$ grid-container：$ global-width;

因此，默认宽度为$ global-width。然后，您可以在“全局”部分中对其进行更改：

// 1.全局

$ global-width：rem-calc（1200）;

例如：1440px：

$ global-width：rem-calc（1440）;

zurb基金会 - 改变网格容器的大小？

3 个答案: