我正在使用语义 ui 来开发网页。 我希望他们做出回应。我尝试在手机上打开网页,但网格的大小变为最小,看起来不太好。 我应该对我的代码做哪些更改?
<div class="ui six wide column
segment" id="logBox"
style="background-color: #F1F0FF;">
<div class="ui centered
header"><h1>Log-In to your
account</h1>
</div>
<form class="ui form">
<div class="field">
<div class="ui left icon
input">
<i class="user icon"></i>
<input type="text"
placeholder="Email-id" >
</div>
</div>
<div class="field">
<div class="ui left icon
input">
<i class="lock icon"></i>
<input type="password"
placeholder="Password">
</div>
</div>
CSS:
@media only screen and (max-
width: 640px){
#logBox{
width:100%;
}
}
最佳答案
我会在某个断点后使元素全宽并删除所有 float 。一般来说,你所有的网格元素都有一个共同的类,比如上面例子中的“ui”,你可以这样使用它:
.ui {
display: block;
float: none;
width: auto;
}
关于html - 如何使语义 ui 页面响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38049503/