HTML元素无法在屏幕尺寸上正确定位

Question

我创建了一个带有侧边栏和内容区域的基本HTMl页面。我的问题是我的内容区域在屏幕尺寸上没有正确定位。具体来说，我的侧边栏和页面内容之间的距离在较小的屏幕上比较大的屏幕小。尽管我的侧边栏的宽度为150px，但我将margin-left的{​​{1}}属性设置为page_content。

以下是较小屏幕的屏幕截图：

以下是较大屏幕的屏幕截图：

以下是小提琴的链接：

https://jsfiddle.net/3ds9jpj4/

如何编辑我的CSS以使间距在较小和较小之间保持一致更大的屏幕？

提前致谢！

Answer 1

你正在使用Bootstrap import React, { Component } from 'react'; import { AlertIOS, AppRegistry, StyleSheet, Text, TouchableHighlight, View } from 'react-native'; import RNHTMLtoPDF from 'react-native-html-to-pdf'; export default class testApp extends Component { createPDF() { var options2 = { html: '<h1>PDF TEST</h1>', // HTML String // ****************** OPTIONS BELOW WILL NOT WORK ON ANDROID ************** fileName: 'test2', /* Optional: Custom Filename excluded extension Default: Randomly generated */ directory: 'docs', /* Optional: 'docs' will save the file in the `Documents` Default: Temp directory */ base64: true , height: 800, width: 1056, /* Optional: 1056 sets the width of the DOCUMENT that will produced Default: 792 */ padding: 24, /* Optional: 24 is the # of pixels between the outer paper edge and corresponding content edge. Example: width of 1056 - 2*padding => content width of 1008 Default: 10 */ }; RNHTMLtoPDF.convert(options2).then((data2) => { console.log(data2.filePath); console.log(data2.base64); AlertIOS.alert( 'options2 filename' + options2.fileName, 'data2 filePath=' + data2.filePath ); }); } render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to testApp </Text> <TouchableHighlight onPress={this.createPDF}> <Text>Create PDF</Text> </TouchableHighlight> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); AppRegistry.registerComponent('testApp', () => testApp); 类。请尝试使用container。

container-fluid

Answer 2

而不是像素，我认为你应该按照25％，75％这样的屏幕百分比，在所有媒体尺寸上的比例看起来相同。

Answer 3

这是由于这个（引导程序）CSS规则在768px以上变为活动状态：

.container {
    max-width: 750px;
}

只使用不同的类名，一个覆盖此设置的附加类，或覆盖它的附加规则。