Twitter bootstrap 在ClojureScript om引导导航栏中布局按钮组
我试图在我正在使用的ClojureScript应用程序的导航栏中包含一个按钮组,但布局不正确,就像按钮组中断了导航栏的布局流程一样。我得到的结果如下: 我希望它看起来更像这样,所有东西都在一条线上: 这是我的密码:Twitter bootstrap 在ClojureScript om引导导航栏中布局按钮组,twitter-bootstrap,clojurescript,om,Twitter Bootstrap,Clojurescript,Om,我试图在我正在使用的ClojureScript应用程序的导航栏中包含一个按钮组,但布局不正确,就像按钮组中断了导航栏的布局流程一样。我得到的结果如下: 我希望它看起来更像这样,所有东西都在一条线上: 这是我的密码: (fn [data owner] (reify
(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")
)
)))))
有人能解释一下如何把所有东西都放在一行上吗?我会用一行。
这是我的一页中的一个布局示例。我有一行两列。第一列有三个垂直项。第二列包含一个表。
如果您设置了“宽度”(: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))
)
)
如果你只想把东西排成一行,这很好。但我对使用navbar组件特别感兴趣,这样我就可以利用它的可折叠性(当屏幕足够窄时,它会切换到汉堡包菜单),而这个解决方案不使用navbar。你知道怎么让导航栏做我想做的吗?(我试着在导航栏中嵌套一行/列,或者在导航栏周围包装一行/列,但没有成功。)我认为我的版本太旧了,无法完成所有这些。我没有看到任何选择。我正在Om之外研究引导,所以我可能会学到一些新的东西。