Bootstrap - 如何使用cols？

Question

我正在嘗試在我的網站上執行響應式導航欄。我想在導航欄的左邊有一個小的img，然後我想要兩行文本 - 一個在另一個之下，接着是我的img。我的cols有問題。當屏幕介於750和950 pc之間時，我的文本出現了問題，我認爲他們沒有我製作的這些列， 如何更正此問題？

<nav class="navbar navbar-default"> 
<div class="container-fluid col-md-12"> 
    <div class="navbar-header"> 
     <div class=" col-sm-2" style="float: left"> 
      <img alt="Brand" src="buty2.png"> 
     </div> 
     <div class="col-sm-10"> 
      <div class="navbar-text">Some text</div> 
      <div class="navbar-text">Some text under first text</div> 

     </div> 
    </div> 
</div> 
</div> 
</nav> 

Answer 1

所以，第一件事情是，你需要使用「行」類和巢內一個div類COL-SM-2與COL-SM-10的另一格。如果您想要在左側放置圖像，請將該圖像嵌套在一個拉伸右側的圖層中，然後將另一個跨度或div與span/div的拉伸左側的圖層相鄰。

行 -col2 --div.pull右 --div.pull左 -col10

是不是你想要的？另外，您可以將列用於不同的媒體查詢，例如爲較小的分辨率製作較小的列等等。

Answer 2

您必須將第一個div的col-md-12替換爲row以啓動該行。

但我認爲navbar-right和navbar-left或navbar brand是你在找什麼。

看到這個： Bootstrap Navbar Components

如果你真的想使用網格系統閱讀清晰。 Bootstrap Grid System

在這種情況下，我最喜歡的是navbar方法。試試吧）