【发布时间】：2017-11-30 16:24:24
【问题描述】：
现在代码是移动友好的，因为我现在设置它的方式我只是希望它是桌面友好的，而不会弄乱移动版本。
这是我目前所拥有的，底部的 css ......
@model IEnumerable<GSWebAPI.GS_Survey_Questions>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/Layout_Surveys.cshtml";
int counter = 0;
}
@foreach (var i in Model)
{
if (i.Question_Type == "DROPDOWN")
{
<div class="container text-center">
<div class="row idrow" data-questions="@counter">
@{counter++;
}
<div id="question1" class="form-group">
<label class="lab text-center" for="form-group-select">
@i.Question_Order @Html.Raw(@i.Question)
</label>
@{ var works = "question" + counter.ToString();}
<select name="@works" class="form-control selects" id="form-group-select">
@for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
{
var t = x - 1;
if (i.qOps != null)
{
<option> @i.qOps.options[t]</option>
}
else
{
<option> @x</option>
}
}
</select>
</div>
</div>
</div>
}
if (i.Question_Type == "RADIO")
{
<div class="container">
<div class="row idrow" data-questions="@counter">
@{counter++;
}
<div class="form-group">
<label class="lab" for="questions">
@i.Question_Order @i.Question
</label>
<div class="row">
<div class="col-xs-12">
<div id="question1" class="radio-inline">
@for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
{
var t = x - 1;
if (i.qOps != null)
{
<label class="radio-inline"><input type="radio" name="question"> @i.qOps.options[t]</label>
}
else
{
<label class="radio-inline"><input type="radio" min="0" max="@x" name="question"></label>
}
}
</div>
</div>
</div>
</div>
</div>
</div>
}
if (i.Question_Type == "CHECKBOX")
{
for (int y = 1; y <= Convert.ToInt32(i.Question_SubType); y++)
{
@*<div class="container">
<div class="row">
<label>@y</label> <input type="checkbox" name="question">
</div>
</div>*@
}
}
}
<div class="azibsButtons">
<button type="button" id="previous" class="btn btn-primary pull-left">Prev</button>
<button type="button" id="next" class="btn btn-primary pull-right">Next</button>
<button type="button" id="submit" onclick="Sendingitoff();" class="btn btn-primary pull-right">Submit</button>
</div>
<script>
function formToJSON() {
var form = {};
$('.selects').each(function () {
var self = $(this);
var name = self.attr('name');
if (form[name]) {
form[name] = form[name] + ',' + self.val();
}
else {
form[name] = self.val();
}
});
return form;
}
function Sendingitoff(){
debugger;
var form = formToJSON();
var look = JSON.stringify(form);
$.ajax({
url: '@Url.Action("Answers", "GSSurvey")/' + '?username=@Request.QueryString["username"]' + '&receiverid=@Request.QueryString["receiverid"]' + '&id=@Request.QueryString["id"]',
type: 'POST',
contentType: "application/json",
dataType: 'json',
data: look,
success: function(data, textStatus, jqXHR) {
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
}
$(document).ready(function () {
ShowTheelement(0);
$("#previous").addClass('hidden');
$("#submit").addClass('hidden');
var dataVal = 0;
$("#next").click(function () {
dataVal++;
$("#previous").removeClass('hidden');
dataVal == $(".idrow[data-questions]").length-1 ? $(this).addClass('hidden') : $(this).removeClass('hidden');
ShowTheelement(dataVal);
if (dataVal == $(".idrow[data-questions]").length - 1)
$("#submit").removeClass('hidden');
});
$("#previous").click(function () {
dataVal--;
$("#next").removeClass('hidden');
dataVal == 0 ? $(this).addClass('hidden') : $(this).removeClass('hidden');
ShowTheelement(dataVal);
if (dataVal == $(".idrow[data-questions]").length - 2)
$("#submit").addClass('hidden');
});
});
function ShowTheelement(dataVal) {
$(".idrow").addClass('hidden');
$(".idrow[data-questions='" + dataVal + "']").removeClass('hidden');
}
</script>
.navbar-header {
position: absolute;
left: 19%;
top: 10%
}
/* Portrait */
@media only screen and (min-device-width: 1025px) and (max-device-width: 1200px) {
.form-control {
margin-right: 25%;
}
}
@media only screen and (min-device-width: 414px) and (max-device-width: 480px) {
.form-control {
margin-left: 13%;
}
}
@media only screen and (min-device-width: 375px) and (max-device-width: 412px) {
.form-control {
margin-left: 11%;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 370px) {
.form-control {
margin-left: 2%;
}
}
.azibsButtons {
padding-top: 100px;
padding-left: 10px;
padding-right: 10px;
}
.form-control {
margin-top: 15px;
position: fixed;
top:250px;
}
.idrow label{
height:100px;
max-height: 100px;
min-height:100px;
}
.form-group{
max-height:188px;
min-height:188px;
}
.lab {
font-size: 13px;
}
.form-control-select {
}
.form-group {
margin-top: 20px;
}
.body-content {
margin-top: 110px;
}
a {
text-decoration: none;
display: inline-block;
margin-bottom: 80px;
padding: 8px 90px;
padding-left: 10px;
}
a:hover {
background-color: #ddd;
color: black;
}
.body-content .row {
font-size: 18px;
}
.navbar {
height: 150px;
}
#navbar-wrapper .imgLogo {
width: 200px;
}
#surveryForm .form-group {
padding-left: 20px;
margin-top: 20px;
}
#surveryForm .radio-inline2 {
font-size: 20px;
padding-left: 20px;
}
#surveryForm .radio-inline3 {
font-size: 15px;
padding-left: 15px;
margin-right: 10px;
}
#surveryForm .radio-inline {
font-size: 15px;
}
#surveryForm .form-group .checkbox-inline {
float: left;
margin-left: 30px;
}
我可以使用这段代码并添加一个包裹在它上面的 div 吗？
【问题讨论】：
-
你使用什么框架/库？
-
我正在使用 MVC .net 框架@liroP
-
请谷歌响应式网页设计。并且请不要将您的移动内容复制并粘贴到桌面。此外，您似乎正在使用 Twitter Bootstrap，它非常适合构建响应式网站。
-
@hungerstar 是对的。查看v4-alpha.getbootstrap.com/layout/grid 并了解网格和响应式设计。调整窗口大小以查看移动/桌面效果，反之亦然。
-
@hungerstar 它是如何工作的？只是为您提供有关如何做事的信息？
标签： html css mobile desktop-application desktop