我正在使用bootstrap和opa来显示文本区域,但是我无法在整个屏幕宽度上覆盖我的文本区域。
我正在使用以下简单代码:
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中。
正确的做法是什么?
谢谢
最佳答案
好吧,您的代码中存在多个问题:
首先,有一个错字:是style="width:100%"
其次,Twitter Bootstrap 2.0现在的宽度为12列,因此span16
毫无意义,您最多只能编写span12
(如果您查看http://bootstrap.opalang.org,它最多可以写16个,因为它是为BS 第三,您在哪里编写CSS?如果它直接在Opa中(css = ...),则确实会被Bootstrap CSS覆盖(因为Opa CSS将被包括在所有其他资源之前),因此您可能需要包括一个外部CSS(您可以看一下https://github.com/Aqua-Ye/OpaChat)
最后,WBootstrap.Grid
似乎并没有真正适合制作100%宽度的元素。