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>

並擺脫你的元素。 經過所有這些更改（加上您可能需要的任何其他視覺調整），它將適用於所有尺寸