Bootstrap 移动对齐与桌面对齐

Question

基本上，我正在编写一个简单的页面，在桌面上，一切都很好。当切换到手机时，它看起来非常不同。我将包括屏幕截图以显示我的意思。我已经在 Nexus 5、iPhone 6、iPad Air 和两个不同的桌面显示器（21 英寸 + 17 英寸）上进行了测试。

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

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

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

这是该部分的代码：

    <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

好的，我找到问题了谢谢你的评论

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

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

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

并去掉你的元素。通过所有这些更改（加上您可能需要的任何额外视觉调整），它适用于所有尺寸

Answer 2

这是 link 到您的完整 HTML。 http://pastebin.com/ZCvDzz3b 您唯一需要做的另一件事是创建一个外部样式 sheet 如果您还没有一个名为 style.css 的样式，然后将此代码添加到此 [=18] 的底部=].确保您的 style.css 与索引文件放置在同一位置。

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

Bootstrap 移动对齐与桌面对齐

Bootstrap Mobile Alignment vs Desktop

html

css

responsive-design

twitter-bootstrap