2

om-bootstrapを使用している ClojureScript アプリケーションの navbar にボタン グループを含めようとしていますが、レイアウトが正しく表示されません。ボタン グループが navbar のレイアウト フローを妨げているようです。私が得ているものは次のようになります:

ここに画像の説明を入力

すべてを 1 行にまとめて、次のようにしたいと思います。

ここに画像の説明を入力

これが私のコードです：

(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")                                    
                    )                                                                  
        )))))

誰かがすべてを 1 行で表示する方法を説明できますか?

4

1 に答える 1

1

行を使用します。これは私のページのサンプル レイアウトです。私は1行、2列です。最初の列には 3 つの垂直項目があります。2 番目の列にはテーブルが含まれています。「幅」(: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))
                                              )
                                       )
于 2015-08-24T15:57:27.473 に答える