GWTBootstrap3是否支持12列网格系统？使用遇布局异常求助

GWTBootstrap3完全支持Bootstrap的12列网格系统，你遇到每个单元格单独占一行的问题，是因为UI Binder代码里的标签和属性使用不符合框架要求，不是框架不支持这个功能。

问题根源 #

你写的<row>和<column>是原生Bootstrap的HTML标签写法，但GWTBootstrap3是将Bootstrap组件封装成了GWT Widget，必须使用框架提供的带命名空间的Widget标签，并且用对应的组件属性来配置列宽，而不是直接用HTML的size属性。

正确的UI Binder写法 #

1. 首先在UI Binder文件顶部引入GWTBootstrap3的命名空间：

xmlns:bs="urn:import:org.gwtbootstrap3.client.ui"

2. 使用框架提供的<bs:Row>和<bs:Column>组件标签，列宽通过响应式属性（如xs、sm、md、lg）来设置，对应原生Bootstrap的col-xs-*、col-sm-*等类。如果想在所有屏幕尺寸下都让列占1/12宽度，设置xs="1"即可。

完整的代码示例：

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:bs='urn:import:org.gwtbootstrap3.client.ui'>

  <bs:Row>
    <bs:Column xs="1">1</bs:Column>
    <bs:Column xs="1">2</bs:Column>
    <bs:Column xs="1">3</bs:Column>
    <bs:Column xs="1">4</bs:Column>
    <bs:Column xs="1">5</bs:Column>
    <bs:Column xs="1">6</bs:Column>
    <bs:Column xs="1">7</bs:Column>
    <bs:Column xs="1">8</bs:Column>
    <bs:Column xs="1">9</bs:Column>
    <bs:Column xs="1">10</bs:Column>
    <bs:Column xs="1">11</bs:Column>
    <bs:Column xs="1">12</bs:Column>
  </bs:Row>

</ui:UiBinder>

额外提示 #

如果需要实现响应式布局，针对不同屏幕尺寸设置不同列宽，可以同时配置多个属性，比如：

<bs:Column xs="12" sm="6" md="4">内容</bs:Column>

这会让该列在超小屏幕（<768px）占满整行，小屏幕（≥768px）占半行，中等屏幕（≥992px）占1/3行，和原生Bootstrap的网格逻辑完全一致。

内容的提问来源于stack exchange，提问作者Nikolai Tkachenko