twitter-bootstrap - 在 ClojureScript om-bootstrap 导航栏中布置按钮组

Question

我试图在使用om-bootstrap的 ClojureScript 应用程序的导航栏中包含一个按钮组，但布局不正确——就像按钮组正在中断导航栏的布局流程。我得到的看起来像这样：

我希望它看起来更像这样，所有内容都在一条线上：

这是我的代码：

(fn [data owner]                                                                       
  (reify                                                                               
    om/IRender                                                                         
    (render [_]                                                                        
      (n/navbar                                                                        
       {:brand (d/a {:href "#"} "Brand")}                                              
       (n/nav                                                                          
        {:collapsible? true}                                                           
        (b/dropdown {:key 1, :title "Menu 1"}                                          
                    (b/menu-item {:key 11} "Hamburger")                                
                    (b/menu-item {:key 12} "Fries")                                    
                    )                                                                  
        (b/button-group {}                                                             
                        (b/button {} "Foo")                                            
                        (b/button {} "Bar"))                                           
        (b/dropdown {:key 2, :title "Menu 2"}                                          
                    (b/menu-item {:key 21} "Tofu")                                     
                    (b/menu-item {:key 22} "Salad")                                    
                    )                                                                  
        ))))) 

有人可以解释如何将所有内容放在一条线上吗？

Answer 1

我会用一行。这是我的一个页面的示例布局。我有一行，两列。第一列有三个垂直项目。第二列包含一个表格。如果您设置“宽度”（：xs 12）并且只有一列，它应该占据页面的宽度。我所说的宽度有不同的设置。它根据设备决定何时包装。

        [om-bootstrap.grid :as g]

                (d/div #js {:style (utils/display (:display e-map))}
                       (p/panel {:header (str "Daily Schedule for " current-date)
                                 :bs-style "primary"
                                 :footer (utils/footer-text)}
                                (g/row {}
                                       (g/col {:class "daily-widgets"
                                               :xs 2}
                                              (om/build db/daily-buttons-widget {:display true})
                                              (om/build ds/date_scanner {:component-id :selected-daily-date :display true})
                                              (om/build summary_work/summary-work-widget {:monitor :selected-daily-date})
                                              )
                                       (g/col {:xs 10}
                                              (table {:striped? true :bordered? true :condensed? true :hover? true}
                                                     (d/thead
                                                      (d/tr
                                                       (d/th {:width "5%"} "Technician")
                                                       (d/th {:width "10%"} "Customer")
                                                       (d/th {:width "10%"} "Vehicle")
                                                       (d/th {:width "10%"} "Status")
                                                       (d/th {:width "10%"} "Checked In")
                                                       (d/th {:width "5%"} "Hours")
                                                       (d/th {:width "50%"} "Notes")
                                                       ))
                                                     (format-tbody daily-view current-date owner))
                                              )
                                       )