Fatal编程技术网
  • html/
  • Html 我设置的边距在移动设备上消失

Html 我设置的边距在移动设备上消失

html css twitter-bootstrap mobile

Html 我设置的边距在移动设备上消失,html,css,twitter-bootstrap,mobile,Html,Css,Twitter Bootstrap,Mobile,我想在移动设备上显示一个响应表。问题是最右边包含收音机的列太靠近屏幕边缘。因此，我在它上面加了一个边距。然而，当我在移动设备上打开页面时，空白消失了。添加一个空列会使表变得怪异。有没有其他方法可以为移动设备上的响应表留出空间？我只是不希望最右边的列离边缘太近 <meta name="viewport" content="width=device-width, initial-scale=1"> <form ng-submit="submit()"> <div

我想在移动设备上显示一个响应表。问题是最右边包含收音机的列太靠近屏幕边缘。因此，我在它上面加了一个边距。然而，当我在移动设备上打开页面时，空白消失了。添加一个空列会使表变得怪异。有没有其他方法可以为移动设备上的响应表留出空间？我只是不希望最右边的列离边缘太近

<meta name="viewport" content="width=device-width, initial-scale=1">
<form ng-submit="submit()">
    <div class="table-responsive">
        <table class="table table-striped table-bordered">
html:


中国工程院无线投票系统
第轮
第
次
提名书号
姓名
年龄
学科专业
工作单位
圈选栏
圈选栏
A.
B
C
{{item.candidate_num}
{{item.name}
{{item.age}
{{item.major}
{{item.company}}
提交
这在没有@media only的情况下可以正常工作。。。在桌面上，但在移动设备上不起作用。

现在希望它对您有用

@仅媒体屏幕和（最大宽度：500px）{
.有边框的桌子{
左边距：20px！重要；
}
}

提名书号
姓名
年龄
学科专业
工作单位
圈选栏
圈选栏
A.
B
C
1.
2.
3.
4.
5.


@仅介质屏幕和（最大宽度：600px）{
.表格响应。表格带条纹{
宽度：100%！重要；
最大宽度：95%！重要；
保证金：10px自动！重要；
}
.表格响应
{
宽度：100%！重要；
最大宽度：95%！重要；
保证金：10px自动！重要；
}
}
我们需要更多的代码。请提供一个工作代码段。html文件仅由标题和表组成。我只是略去了这件事的细节table@XINDILI那么CSS呢？我们需要能够重现您的问题…表响应{margin right:5rem；}这在桌面上可以正常工作，但在移动设备上不行。存在一些冲突，好吧，然后尝试填充右侧：10px！重要的；它仍然不起作用。我张贴我所有的代码。请看我更新的问题。我已经改进了css代码，它可以正常工作，请在代码中使用。试试`！重要提示`或共享您的代码，以便更好地发挥作用。@XINDILI您是否尝试了我的新答案？您是否在控制台中添加了自定义css？ 
@media only screen and (max-width: 600px) {
    .table-responsive{
        margin-right: 5rem !important;
    }
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>中国工程院无线投票系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/vote.css">
</head>
<body ng-app="vote" ng-controller="vote_ctrl" ng-init="init()" ng-show="is_start">
<h2 class="sub-header">
    <span ng-bind="voteData.department"></span>第<span ng-bind="voteData.round"></span>轮
    <span ng-bind="voteData.group"></span><span ng-bind="voteData.vote_type"></span>第
    <span ng-bind="voteData.times"></span>次
</h2>
<form ng-submit="submit()">
    <div class="table-responsive">
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th rowspan="2">提名书号</th>
                <th rowspan="2">姓名</th>
                <th rowspan="2">年龄</th>
                <th rowspan="2">学科专业</th>
                <th rowspan="2">工作单位</th>
                <th colspan="3" ng-if="voteData.ballot_type =='记分'">圈选栏</th>
                <th colspan="2" ng-if="voteData.ballot_type =='表决'">圈选栏</th>
            </tr>
            <tr>
                <th ng-if="voteData.ballot_type =='记分'">A</th>
                <th ng-if="voteData.ballot_type =='记分'">B</th>
                <th ng-if="voteData.ballot_type =='记分'">C</th>

                <th ng-if="voteData.ballot_type =='表决'"><i class="glyphicon glyphicon-ok"></i></th>
                <th ng-if="voteData.ballot_type =='表决'"><i class="glyphicon glyphicon-remove"></i></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in voteData.candidates">
                <td>{{item.candidate_num}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.major}}</td>
                <td>{{item.company}}</td>

                <td ng-if="voteData.ballot_type =='记分'">
                    <input type="radio" name="{{item}}" ng-model="item.score" value="3" required>
                </td>
                <td ng-if="voteData.ballot_type =='记分'">
                    <input type="radio" name="{{item}}" ng-model="item.score" value="2" required>
                </td>
                <td ng-if="voteData.ballot_type =='记分'">
                    <input type="radio" name="{{item}}" ng-model="item.score" value="1" required>
                </td>

                <td ng-if="voteData.ballot_type =='表决'">
                    <input type="radio" name="{{item}}" ng-model="item.score" value="1" required>
                </td>
                <td ng-if="voteData.ballot_type =='表决'">
                    <input type="radio" name="{{item}}" ng-model="item.score" value="0" required>
                </td>

            </tr>
            </tbody>
        </table>
    </div>
    <button type="submit" class="btn btn-success btn-lg center-block">提交</button>
</form>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="js/vote.js"></script>
</body>
</html>

  <style>
     @media only screen and (max-width: 600px) {
       .table-responsive .table-striped{
           width: 100% !important;
           max-width: 95% !important;
           margin: 10px auto !important;
           }
        .table-responsive
       {
         width: 100% !important;
         max-width: 95% !important;
         margin: 10px auto !important;
       }
    }
 </style>