引導控件根據屏幕寬度更改位置高度

我有一個引導行，其中包含標題標記和鏈接標記。當屏幕寬度小於768像素時，它們在同一行上對齊。當容器寬度爲768或更大時，鏈接元素移動幾個像素。引導控件根據屏幕寬度更改位置高度

下面是展示此行爲的示例：https://jsfiddle.net/bz3399x8/

<div class="row"> 
    <div class="col-sm-12"> 
    <a class="btn btn-primary" href="#" style="width: 80px; float: right;"> 
     <i class="icon-plus"> 
     Add 
     </i> 
    </a> 
    <h1> 
     Hello World 
    </h1> 
    </div> 
</div>

下面是截圖展示了這種行爲。

這裏有兩個問題：

是什麼原因造成的？
如何解決這個問題？

來源

2016-02-25 Coderama

這是你的col-sm-12。在大於768的屏幕尺寸上，它會向左漂浮，這會增加容器的高度。如果將其更改爲col-md-12或其他更大的內容，則會發現斷點從768變爲906或者更近。 – Blunderfest

根據Bootstrap Docs你的語法是錯誤的，

它需要.container包裹.row

和

h1和a按鈕元素需要包裝在Bootstrap列中。因此，在這種情況下，您可以使用.col-sm-10 + .col-sm-2。

新增.col-xs用於演示

.row { 
 
    /* demo*/ 
 
    background:red 
 
} 
 
.btn { 
 
    margin-top:20px /* choose as it fit you better */ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-10 col-sm-10"> 
 
     <h1> 
 
     Hello World 
 
    </h1> 
 
    </div> 
 
    <div class="col-xs-2 col-sm-2"> 
 
     <a class="btn btn-primary" href="#"> 
 
     <i class="icon-plus"> 
 
     Add 
 
     </i> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-02-25 21:32:03 dippas

這對我的實際問題最好，因爲它真正響應移動設備（包括iPhone4尺寸） – Coderama

我發現將主柱從sm更改爲xs（col-xs-12）具有最佳的響應移動佈局，同時仍然保持HTML和類標籤簡單 – Coderama

@Coderama如果你檢查文檔，你會發現你可以在一個HTML標籤中使用所有的類，這取決於你想要什麼樣的設計:) – dippas

雖然包裝在不同的列元素將有助於回答您的問題。如果您正在查看將單個元素包裝在單列中，則需要將元素指定爲內聯。自h1元素和a元素髮生問題，即使在自舉的同一行中，但顯示爲block和inline-block。

將display: inline-block添加到h1具有頂部填充的元素到a元素。這也應該回答。

與display: inline一起嘗試h1查看行爲的差異。 inline元素不支持垂直邊距。

小提琴：https://jsfiddle.net/dk_dragonknight/m8ey6mba/

來源

2016-02-25 22:14:53 pratikpawar

這工作！謝謝。 – Coderama

引導控件根據屏幕寬度更改位置高度

回答

相關問題