Doświadczam pewnych problemów próbujących tworzyć kolumny dla szyn za pomocą Bootstrap. Zainstalowałem bootstrap z " Szyny integrujące i bootstrap, część 1 - instalacja ". To właśnie mam do tej pory:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="bootstrap.css" />
  </head>
 <body>
  <div id="main-container" class="container">
   <div class="row">
     <div id="A_Name_Title" class="col-md-6" style="background-color: LightSteelBlue">
      <p>Test</p>
     </div>
    <div id="A_Time_Spent" class="col-md-6" style="background-color: LightSteelBlue" >
     <p>Test2</p>
    </div>
   </div>
  </div>
 </body>
</html>

W kodzie próbuję utworzyć dwie kolumny ułożone poziomo, więc mogę używać ich jako tytułów na następujące wiersze. Jednak kiedy uruchomię kod, dostaję:

enter image description here

Próbowałem "kolumny w Bootstrap 3.0 tylko układanie pionowo", ale Nadal nie mogę go pracować.

Używam szyn 5.0.1 z Bootstrap 3.3.7 i Ruby 2.2.6.

Edytuj - 02-16-17 - 17:00

Przesunął nagłówek do właściwego miejsca. Próbowałem zmienić "href =" bootstrap.css "na" href = "arkusze stylów / bootstrap.css", ale Rubymine narzekał na to. Ignorując skargę, wynik był nadal taki sam. Podążał za samouczkiem, z którym @fabrizio związał się i nadal nie mogłem go uruchomić. Z kodem @ Fabrizio, zastępując mój kod linku

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Dostaję rezultat, którego chcę, ale z tego, co rozumiem, jeśli ta strona internetowa spadnie, tracę dostęp do bootstrap.css

To jest to, co mam dla mojego pliku "Application.css.sass":

@import "bootstrap-sprockets"
@import "bootstrap"

Edytuj - 02/18/17

Okazuje się, że posiadałem problemy z skryptem kawy i dodając "kawiarnia" Script-script-scripty "," 1.8.0 '", a następnie uruchomienie instalacji pakietu, udało mi się zaimportować bootstrap przez korzystanie z Sass Gem i aplikacji plik .html.erb. Dziękuję za całą pomoc.

0
VectorConvoy 16 luty 2017, 19:48

2 odpowiedzi

Najlepsza odpowiedź

Nie jestem pewien, czy możesz załadować pliki CSS z Ruby na szynach bez podążania za rurociągiem zasobów, zasadniczo będziesz miał plik Application.css w aplikacji / aktywów / arkusze stylów, plik HTML powinien mieć ten manifestowy plik w tagu głowicy z następująca składnia <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %> zamiast <link rel="stylesheet" type="text/css" href="path to your css file" /> Manifest Plik Application.CSS zawierają link do wszystkich plików CSS o następującej składni:

@import "bootstrap-sprockets";
@import "bootstrap";

Dodatkowo z szynami można włączyć bootstrap z klejnotem, nazywa się bootstrap-sass i możesz postępować zgodnie z instrukcjami w https://github.com/twbs/bootstrap-sass

Wystarczy obejść klejnot, zgodnie z instrukcjami w Gemfile, uruchomić instalację pakietu, a następnie dołącz go do aplikacji.cssss ..

Słuchaj, możesz przeczytać o rurociągu zasobów. http://guides.Rubyonrails.org/asset_pipeline.html

Włączyłem Twoje CSS w moim edytorze tekstu i jest to wynik, który dostaję, dwie pionowe kolumny, dla mnie czerwoną i niebieską kolumnę. Myślę, że jest to wynik, który chcesz dotrzeć do Col-MD-6?

enter image description here

Oto kod, którego użyłem:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="main.css" rel="stylesheet" />
  </head>
<body>
  <div id="main-container" class="container">
   <div class="row">
     <div id="A_Name_Title" class="col-md-6" style="background-color: LightSteelBlue">
      <p>Test</p>
     </div>
    <div id="A_Time_Spent" class="col-md-6" style="background-color: red" >
     <p>Test2</p>
    </div>
   </div>
  </div>
</body>
</html>
0
Fabrizio Bertoglio 16 luty 2017, 18:45

Wszystko wydaje się dobre, jeśli nic nie działa, spróbuj utworzyć nowy plik custom.scss in app/assets/stylesheets i przenieś zawartość z aplikacji.css do Custom.Scss. Sprawdź także selektory CSS, którego używałeś, nie zastępuj żadnych stylów.

0
Vigneshwaran Sivalingam 16 luty 2017, 18:55