如何根据屏幕尺寸在Bootstrap中设置不同的高度

时间:2018-08-09 17:25:56

标签: html css bootstrap-4

我一直在制作带有引导程序的网站,并尝试使用各个部分来分隔各个部分。但是,在大屏幕上,文本和该节末尾之间的空间太大,而在小屏幕上,该节的文本行?每个部分在CSS中都有一个固定的高度,我相信这是可以做到的。

这是我用来创建版块的网站,因此与我的网站类似:https://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp 谢谢

2 个答案:

答案 0 :(得分:0)

首先,我不建议从w3schools复制和粘贴。他们的代码非常基础,根据您的网站和样式,使用它们可能会有设计缺陷。

要解决您的问题,必须添加您正在谈论的代码。作为一个概观,scrollspy不需要高度直径。我建议删除样式表中的任何高度。滚动指定区域内的内容,即高度。如果删除高度不起作用,请发布您的代码,以便我为您提供更直接的解决方案。

答案 1 :(得分:0)

您可以使用Listening for transport dt_socket at address: 9009 Launching GlassFish on Felix platform Aug 09, 2018 11:00:17 PM com.sun.enterprise.glassfish.bootstrap.osgi.BundleProvisioner createBundleProvisioner INFO: Create bundle provisioner class = class com.sun.enterprise.glassfish.bootstrap.osgi.BundleProvisioner. Aug 09, 2018 11:00:17 PM com.sun.enterprise.glassfish.bootstrap.osgi.BundleProvisioner$DefaultCustomizer getLocations WARNING: Skipping entry because it is not an absolute URI. Aug 09, 2018 11:00:17 PM com.sun.enterprise.glassfish.bootstrap.osgi.BundleProvisioner$DefaultCustomizer getLocations WARNING: Skipping entry because it is not an absolute URI. Aug 09, 2018 11:00:17 PM com.sun.enterprise.glassfish.bootstrap.osgi.BundleProvisioner startBundles WARNING: Can not start bundle file:/C:/Program%20Files/glassfish-4.1.1/glassfish/modules/core.jar because it is not contained in the list of installed bundles. Registered com.sun.enterprise.glassfish.bootstrap.osgi.EmbeddedOSGiGlassFishRuntime@50fad361 in service registry. #!## LogManagerService.postConstruct : rootFolder=C:\Program Files\glassfish-4.1.1\glassfish #!## LogManagerService.postConstruct : templateDir=C:\Program Files\glassfish-4.1.1\glassfish\lib\templates #!## LogManagerService.postConstruct : src=C:\Program Files\glassfish-4.1.1\glassfish\lib\templates\logging.properties #!## LogManagerService.postConstruct : dest=C:\Users\Asus\personal_domain\config\logging.properties Info: Running GlassFish Version: GlassFish Server Open Source Edition 4.1.1 (build 1) Info: Server log file is using Formatter class: com.sun.enterprise.server.logging.ODLLogFormatter Info: Realm [admin-realm] of classtype [com.sun.enterprise.security.auth.realm.file.FileRealm] successfully created. Info: Realm [file] of classtype [com.sun.enterprise.security.auth.realm.file.FileRealm] successfully created. Info: Realm [certificate] of classtype [com.sun.enterprise.security.auth.realm.certificate.CertificateRealm] successfully created. Info: HV000001: Hibernate Validator 5.1.2.Final Info: Authorization Service has successfully initialized. Info: Registered org.glassfish.ha.store.adapter.cache.ShoalBackingStoreProxy for persistence-type = replicated in BackingStoreFactoryRegistry Warning: Instance could not be initialized. Class=interface org.glassfish.grizzly.http.server.AddOn, name=http-listener-1, realClassName=org.glassfish.grizzly.http2.Http2AddOn Warning: Instance could not be initialized. Class=interface org.glassfish.grizzly.http.server.AddOn, name=http-listener-2, realClassName=org.glassfish.grizzly.http2.Http2AddOn Warning: Instance could not be initialized. Class=interface org.glassfish.grizzly.http.server.AddOn, name=admin-listener, realClassName=org.glassfish.grizzly.http2.Http2AddOn Info: GlassFish Server Open Source Edition 4.1.1 (1) startup time : Felix (15,356ms), startup services(3,170ms), total(18,526ms) Severe: Shutting down server due to startup exception java.io.IOException: Unable to establish loopback connection at sun.nio.ch.PipeImpl$Initializer.run(PipeImpl.java:94) at sun.nio.ch.PipeImpl$Initializer.run(PipeImpl.java:61) at java.security.AccessController.doPrivileged(Native Method) at sun.nio.ch.PipeImpl.<init>(PipeImpl.java:171) at sun.nio.ch.SelectorProviderImpl.openPipe(SelectorProviderImpl.java:50) at java.nio.channels.Pipe.open(Pipe.java:155) at sun.nio.ch.WindowsSelectorImpl.<init>(WindowsSelectorImpl.java:127) at sun.nio.ch.WindowsSelectorProvider.openSelector(WindowsSelectorProvider.java:44) at org.glassfish.grizzly.nio.Selectors.newSelector(Selectors.java:62) at org.glassfish.grizzly.nio.SelectorRunner.create(SelectorRunner.java:109) at org.glassfish.grizzly.nio.NIOTransport.startSelectorRunners(NIOTransport.java:287) at org.glassfish.grizzly.nio.NIOTransport.start(NIOTransport.java:506) at org.glassfish.grizzly.config.GenericGrizzlyListener.start(GenericGrizzlyListener.java:185) at com.sun.enterprise.v3.services.impl.GlassfishNetworkListener.start(GlassfishNetworkListener.java:109) at com.sun.enterprise.v3.services.impl.GrizzlyProxy.start0(GrizzlyProxy.java:267) at com.sun.enterprise.v3.services.impl.GrizzlyProxy.start(GrizzlyProxy.java:241) at com.sun.enterprise.v3.services.impl.GrizzlyService.createNetworkProxy(GrizzlyService.java:567) at com.sun.enterprise.v3.services.impl.GrizzlyService.postConstruct(GrizzlyService.java:490) at org.jvnet.hk2.internal.ClazzCreator.postConstructMe(ClazzCreator.java:326) at org.jvnet.hk2.internal.ClazzCreator.create(ClazzCreator.java:374) at org.jvnet.hk2.internal.SystemDescriptor.create(SystemDescriptor.java:471) at org.glassfish.hk2.runlevel.internal.AsyncRunLevelContext.findOrCreate(AsyncRunLevelContext.java:228) at org.glassfish.hk2.runlevel.RunLevelContext.findOrCreate(RunLevelContext.java:85) at org.jvnet.hk2.internal.Utilities.createService(Utilities.java:2072) at org.jvnet.hk2.internal.ServiceHandleImpl.getService(ServiceHandleImpl.java:114) at org.jvnet.hk2.internal.ServiceHandleImpl.getService(ServiceHandleImpl.java:88) at org.glassfish.hk2.runlevel.internal.CurrentTaskFuture$QueueRunner.oneJob(CurrentTaskFuture.java:1213) at org.glassfish.hk2.runlevel.internal.CurrentTaskFuture$QueueRunner.run(CurrentTaskFuture.java:1144) at org.glassfish.hk2.runlevel.internal.CurrentTaskFuture$UpOneLevel.run(CurrentTaskFuture.java:762) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624) at java.lang.Thread.run(Thread.java:748) Caused by: java.net.BindException: Address already in use: bind at sun.nio.ch.Net.bind0(Native Method) at sun.nio.ch.Net.bind(Net.java:433) at sun.nio.ch.Net.bind(Net.java:425) at sun.nio.ch.ServerSocketChannelImpl.bind(ServerSocketChannelImpl.java:223) at sun.nio.ch.ServerSocketAdaptor.bind(ServerSocketAdaptor.java:74) at sun.nio.ch.ServerSocketAdaptor.bind(ServerSocketAdaptor.java:67) at sun.nio.ch.PipeImpl$Initializer$LoopbackConnector.run(PipeImpl.java:121) at sun.nio.ch.PipeImpl$Initializer.run(PipeImpl.java:76) ... 31 more Info: Server shutdown initiated Info: Registered com.sun.enterprise.glassfish.bootstrap.osgi.EmbeddedOSGiGlassFishImpl@772861aa as OSGi service registration: org.apache.felix.framework.ServiceRegistrationImpl@55a88417. Info: Unregistered com.sun.enterprise.glassfish.bootstrap.osgi.EmbeddedOSGiGlassFishImpl@772861aa from service registry. Info: FileMonitoring shutdown Completed shutdown of Log manager service Info: Shutdown procedure finished 这样的absolute定位值,而不是将最小高度设置为500px这样的relative值,这意味着浏览器可见窗口的高度。要了解有关(100vhvh单位的更多信息,请访问here,因此这些部分的高度将与浏览器视口相同。请参考以下示例。

但是有时候节的高度会小于节的文本高度,从而导致溢出,为了防止这种情况,我们使用属性vw,它将根据内部内容设置高度,所以我们当超过最小高度时可以将其用作后备,并防止任何文本溢出的可能性!

max-height:fit-content
html, body {
      height:100%;
      width:100%;
  }
  #section1 {padding-top:50px;min-height:100vh;max-height:fit-content;color: #fff; background-color: #1E88E5;}
  #section2 {padding-top:50px;min-height:100vh;max-height:fit-content;color: #fff; background-color: #673ab7;}
  #section3 {padding-top:50px;min-height:100vh;max-height:fit-content;color: #fff; background-color: #ff9800;}
  #section41 {padding-top:50px;min-height:100vh;max-height:fit-content;color: #fff; background-color: #00bcd4;}
  #section42 {padding-top:50px;min-height:100vh;max-height:fit-content;color: #fff; background-color: #009688;}