Question

基本上，我正在编写一个简单的页面，而且在桌面上，它都很好地对齐。当切换到移动设备时，它看起来非常不同。我将包含截图以显示我的意思。我在Nexus 5，iPhone 6，iPad Air和两个不同的桌面显示器（21英寸+ 17英寸）上进行了测试。

我将如何准确地解决这个问题？我在bootstrap方面不是很先进，但我在关于移动设备的文档中找不到任何内容。

此外，物体的对齐方式及其位置会根据显示器的大小而变化。即使我缩小它也会改变事物的位置并使它看起来很奇怪。

我想我想知道的是如何让这个页面更具代表性！

Desktop Mobile

以下是该部分的代码：

    <div class="well" style="height:12%;width:75%;">
        <div class="col-md-10">
            Testing12332<br /><br /><a class="link" href="view.php?id=27"><b>Testingthis</b> - 0 seconds</a>
        </div>
        <div class="col-md-2">
            <form action="like.php?id=27" method="POST" style="margin-bottom:0px;margin-top:-8%;">
                <button class="btn btn-primary btn-sm" type="submit" name="submit" id="submit">&#9650</button><br />
                <input type="hidden" name="id" value="27">
            </form>
            <div class="well" style="padding:0px;margin-bottom:0px;">
                0
            </div>
            <form action="dislike.php?id=27" method="POST">
                <button class="btn btn-primary btn-sm" type="submit" name="submit" id="submit">&#9660;</button><br />
                <input type="hidden" name="id" value="27">
            </form>
        </div>
    </div>

如果需要更多信息，请与我们联系！我试着提供尽可能多的东西！此外，是的，我使用Bootswatch（Flatly），如果这有所作为。

编辑：所有代码都在这里 - ＆gt; http://pastebin.com/AvYEkDNN

很抱歉格式混乱了，很多都是用PHP输出的，并且在每个循环中弄乱了格式。

Answer 1

这是指向完整HTML的链接。 http://pastebin.com/ZCvDzz3b如果您还没有名为style.css的外部样式表，则需要创建外部样式表，然后在此表的底部添加此代码。确保您的style.css与索引文件放在同一位置。

@media (min-width:768px) {
        .well {width:75%!important;
                height:22%!important;
        }
    }

Answer 2

好的，我发现了这个问题，感谢您的评论

首先，不要使用内联样式。它通常意味着问题，很少有解决方案。

考虑到这一点，摆脱这个：

<form action="like.php?id=27" method="POST" style="margin-bottom:0px;margin-top:-8%;">

并将其替换为

<form action="like.php?id=27" method="POST" class="my-custom-form">

这将允许您每次都重复使用该样式。

现在你可以通过简单地添加一些EXTERNAL CSS来做这样的事情：

.my-custom-form{margin-bottom:0px;margin-top:-8%;}
/** add some styling for small devices **/
@media handheld, only screen and (max-width: 767px) {
.my-custom-form{margin-bottom:0px;margin-top:1% /* or whatever, just not a negative value */;}
}

它将解决您的问题

修改

除此之外，请按照以下方式清理代码：

<div class="well row-fluid"> <div class="col-md-10">testingthis <br /> <br /><a class="link" href="view.php?id=28"><b>Anonymous</b> - 27 minutes ago</a> </div> <div class="col-md-2"> <form action="like.php?id=28" method="POST" class="my-form"> <button class="btn btn-primary btn-sm" type="submit" name="submit" id="submit">&#9650</button> <br /> <input type="hidden" name="id" value="28" /> </form> <div class="number">-1</div> <form action="dislike.php?id=28" method="POST"> <button class="btn btn-primary btn-sm" type="submit" name="submit" id="submit">▼</button> <br /> <input type="hidden" name="id" value="28" /> </form> </div> <div class="clear clearfix"></div> </div>

并摆脱你的元素。通过所有这些更改（以及您可能需要的任何其他视觉调整），它将适用于所有尺寸

Bootstrap Mobile Alignment vs Desktop

2 个答案: