0

我正在使用 bootstrap 和 opa 来显示一个 textarea，但我没有设法将我的 textarea 跨越整个屏幕宽度。

我正在使用以下简单代码：

import stdlib.themes.bootstrap;
import stdlib.widgets.bootstrap;

WB = WBootstrap;

textInput = <textarea style="width=30%" rows=30> This is a text area </textarea>
text2Input = <textarea style="width=100%" rows=1> another textarea </textarea>


content = WB.Grid.row([{span:4, offset:none, content: text2Input}]) <+>
 WB.Grid.row([{span:16, offset:none, content: textInput}])



Server.start(
   Server.http,
   [
     {page: function() {content}, title: "test" }
   ]
)

我也尝试使用以下 css ：

textarea
{
    border:1px solid #999999;
    width:10%;
    margin:5px 0;
    padding:3px;
}

但它也不起作用。

似乎 WBoostrap 覆盖了我的所有更改。"width:100%" 样式不会出现在 opa 生成的 xhtml 中。

这样做的正确方法是什么？

谢谢

4

1 回答 1

1

那么您的代码中有多个问题：

  • 首先，有一个错字：它是style="width:100%"

  • 其次，Twitter Bootstrap 2.0 现在是 12 列宽，所以span16没有任何意义，你最多可以写span12（如果你查看http://bootstrap.opalang.org，它说最多 16，因为它是为 BS <= 1.4 编写的)

  • 第三，你在哪里写的 CSS ？如果它直接在 Opa (css = ...) 中，它确实会被 Bootstrap CSS 覆盖（因为 Opa CSS 将在所有其他资源之前包含在内），因此您可能需要包含外部 CSS（您可以查看https://github.com/Aqua-Ye/OpaChat）

  • 最后，WBootstrap.Grid似乎并没有真正适应制作 100% 宽度的元素。

于 2012-04-30T21:28:31.127 回答