Bootstrap移动对齐vs桌面

Question

基本上，我正在编写一个简单的页面，在桌面上，一切都很好。 切换到移动设备后，其外观将大为不同。 我将包括截图以显示我的意思。 我已经在Nexus 5，iPhone 6，iPad Air和两个不同的台式机显示器（21英寸+ 17英寸）上对此进行了测试。

我将如何确切地解决此问题？ 我在引导程序方面不是很高级，但是在有关移动的文档中找不到任何东西。

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

我想我想知道的是如何使此页面更具响应性！

这是该部分的代码：

    <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）。

编辑：所有代码都在这里-> 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">&#9660;</button>
            <br />
            <input type="hidden" name="id" value="28" />
        </form>
    </div>
    <div class="clear clearfix"></div>
</div>

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