集成Jupiter交易组件导致页面宽度异常的问题求助

集成Jupiter交易组件后功能正常，但组件会强制改变页面宽度，调整外层div样式、移除外层div等操作无效，大概率是组件自带的内置样式（比如固定最小宽度、未设置盒模型）突破了页面布局限制，试试以下解决方案：

方案1：给容器添加强制宽度约束及溢出控制 #

修改外层容器样式，通过max-width限制最大宽度，配合overflow-x: auto避免组件撑爆页面：

<div style="width: 100%; max-width: 1200px; margin: 0 auto; overflow-x: auto;">
  <div id="integrated-terminal"></div>
  <script>
    window.Jupiter.init({
      displayMode: "integrated",
      integratedTargetId: "integrated-terminal",
      endpoint: "https://api.mainnet-beta.solana.com",
      formProps: {
        fixedOutputMint: true,
        swapMode: "ExactIn",
        initialOutputMint: "DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263",
      },
    });
  </script>
</div>

max-width可根据你的页面布局设置为具体数值（如100%、1200px），overflow-x: auto会在组件宽度超出容器时显示横向滚动条，保证页面布局稳定。

方案2：用CSS优先级覆盖组件内置样式 #

给目标容器添加自定义类，通过!important强制覆盖组件自带的宽度样式：

<style>
  .jupiter-terminal-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .jupiter-terminal-wrap * {
    box-sizing: border-box !important;
  }
</style>
<div class="jupiter-terminal-wrap" style="margin: 0 auto;">
  <div id="integrated-terminal"></div>
  <script>
    window.Jupiter.init({
      displayMode: "integrated",
      integratedTargetId: "integrated-terminal",
      endpoint: "https://api.mainnet-beta.solana.com",
      formProps: {
        fixedOutputMint: true,
        swapMode: "ExactIn",
        initialOutputMint: "DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263",
      },
    });
  </script>
</div>

box-sizing: border-box确保组件的内边距、边框不会额外增加宽度，避免布局偏移。

方案3：检查Jupiter初始化配置的样式参数 #

部分版本的Jupiter终端支持在init配置中传入容器样式参数，若你的版本支持，可直接在配置中定义样式：

window.Jupiter.init({
  displayMode: "integrated",
  integratedTargetId: "integrated-terminal",
  endpoint: "https://api.mainnet-beta.solana.com",
  formProps: {
    fixedOutputMint: true,
    swapMode: "ExactIn",
    initialOutputMint: "DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263",
  },
  // 仅当版本支持时添加此配置
  containerStyles: {
    width: "100%",
    maxWidth: "100%",
    boxSizing: "border-box"
  }
});

注：此参数需参考Jupiter官方文档确认是否支持，若无则忽略该方案。

内容的提问来源于stack exchange，提问作者Benoit Vincenzi