Vaadin-响应柱

您需要研究使用其他布局类型。Vaadin为您提供CssLayout和CustomLayout以及标准的Vertical和Horizo​​ntal。

目前，我个人最喜欢的是使用CssLayout，然后使用自定义CSS网格使组件具有响应能力。

Java：

@StyleSheet("MyStyleSheet.css")public class ResponsiveLayout extends CssLayout {    private static final long serialVersionUID = -1028520275448675976L;    private static final String RESPONSIVE_LAYOUT = "responsive-layout";    private static final String LABEL_ONE = "label-one";    private static final String LABEL_TWO = "label-two";    private Label labelOne = new Label();    private Label labelTwo = new Label();    public ResponsiveLayout() {        config();        addComponents(labelOne, labelTwo);    }    private void config() {        addStyleName(RESPONSIVE_LAYOUT);        labelOne.addStyleName(LABEL_ONE);        labelTwo.addStyleName(LABEL_TWO);    }}

CSS：

.responsive-layout {    display: grid !important;    grid-template-rows: auto;    grid-template-columns: 1fr 1fr;    display: -ms-grid !important;     -ms-grid-rows: auto;     -ms-grid-columns: 1fr 1fr;  }.label-one {    grid-column: 1;    -ms-grid-column: 1;  }.label-two {    grid-column: 2;    -ms-grid-column: 2;  }@media all and (max-width : 992px) {    .responsive-layout {        grid-template-columns: 1fr;        -ms-grid-columns: 1fr;      }    .label-one {        grid-column: 1;        -ms-grid-column: 1;      }    .label-two {        grid-column: 1;        -ms-grid-column: 1;      }}