2015-08-26 4 views
1

У меня проблема с использованием CSS, поскольку я новичок в этом. В настоящее время я использую всплывающее окно bootstrap, например, как показано ниже. Когда я нажимаю кнопку «Полный Spec», появится всплывающее окно.Всплывающее окно Bootstrap не появляется при включении bootstrap.min.css

Однако файл bootstrap.min.css кажется проблемой сейчас. Если я включу bootstrap.min.css в свой код, всплывающее окно не появится. И если я не включил этот файл, появится всплывающее окно, но выравнивание, размер моих изображений, текста и других изменений.

Есть ли способ, чтобы появилось всплывающее окно, не нарушая выравнивание и размер изображения/текста? Я пробовал изменить код в bootstrap.min.css, но его вроде бы трудно, поскольку мне нужно прокручивать его слева направо, а не сверху вниз.

Пожалуйста, помогите мне решить мою проблему. Благодаря!

enter image description here

<head> 
    <meta charset="utf-8"> 
    <link rel="icon" type="image/ico" href="favicon.ico"> 
    <title>Test</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 

    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/font-awesome.css"> 
    <link rel="stylesheet" href="css/animate.css"> 
    <link rel="stylesheet" href="css/templatemo_misc.css"> 
    <link rel="stylesheet" href="css/bootstrap.css"> 

    <script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script> 
    <script src="js2/jquery.js" type="text/javascript"></script> 
    <script src="js2/bootstrap.js" type="text/javascript"></script> 
</head> 
+0

Вы можете оставить свой раздел – stackoverfloweth

+0

привет @godmode я уже включал раздел :) –

+0

На первый взгляд вашего '' разделе, вы, кажется, отсутствует закрывающий тег ''> в вашем мета видовом тег. '

ответ

1

Я рекомендую вам не изменить код непосредственно в файле bootstrap.min.css. Что делать, если вы хотите использовать одни и те же классы в будущем или обновить версию Bootstrap? Вместо этого, вы можете переопределить класс (ы), которые вы хотите в пользовательском файле CSS, а затем добавить свой собственный файл CSS после Bootstrap один, например, так:

<head> 
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="custom.css"> 
</head> 

Если есть какие-либо классы с таким же именем в обоих CSS-файлах последний CSS переопределит любые классы, определенные в предыдущем CSS.

Я также пробовал включить в мое текущее приложение как bootstrap.min.css, так и bootstrap.css, и заметил, что он полностью меняет стиль. Затем я попробовал каждую таблицу стилей самостоятельно и заметил, что в моем макете страницы были еще более резкие различия, которые бросали меня на Curveball, потому что стили должны быть одинаковыми (обе версии - версии 3.3.5). Если вы еще этого не сделали, попробуйте самостоятельно использовать каждую таблицу стилей, чтобы увидеть, меняется ли макет вашей страницы. Если это так, возможно, вы используете две разные версии Bootstrap.

Единственная разница между bootstrap.min.css и bootstrap.cssдолжно быть производительностью. .min обозначает minified и используется в производстве, тогда как другой файл используется в разработке. Возможно, что-то мне не хватает в самой последней версии Bootstrap, но между этими двумя файлами не должно быть разницы в коде; классы должны быть одинаковыми.

В то же время, если у кого-то нет лучшего ответа, я рекомендую вам придерживаться версии Bootstrap, которую вы использовали с самого начала, что звучит как ее неустановленная версия.

EDIT: Стоит также отметить, что переопределение класса влияет только на свойства, которые вы указали. Возьмем, например, этот класс:

h1 { 
    color: orange; 
    background-color: black; 
} 

И этот класс, чтобы переопределить его:

h1 { 
    color: red; 
} 

Единственное свойство, которое изменяет это свойство цвета, а также другое имущество, по-прежнему относятся к h1 элементов.Поэтому вместо оранжевого заголовка с черным фоном у вас будет красный заголовок с черным фоном.

+0

Привет, спасибо вам за объяснение. Теперь я понимаю лучше. Однако у меня все еще мало вопросов по этому поводу. Я попытался добавить свой собственный CSS и включить его в свой код, как и вы предлагали. Но тогда, то же самое, всплывающее окно не появится. Если бы я вносил изменения в свой пользовательский CSS, должен ли я внести изменения в свой «bootstrap.min.css»? Или есть ли какой-нибудь код в «bootstrap.min.css», чтобы не появлялось всплывающее окно? Надеюсь, вы могли бы помочь мне, поскольку я новичок в этом бутстрапе и css. Спасибо заранее, сэр. –

+0

@amln_ndh Я могу помочь, но вам нужно будет увидеть тело вашего HTML и jQuery. Вы используете jQuery для запуска своих всплывающих окон? Кроме того, мы говорим о Bootstrap popovers, не так ли? Я не думаю, что Bootstrap имеет какой-либо компонент «popup». – UltraSonja

+0

@amln_ndh Я просто понял, что вы не используете 'bootstrap.min.js', когда вы используете' bootstrap.min.css'. Вы пытались использовать 'bootstrap.min.js' вместо' bootstrap.js'? – UltraSonja

Смежные вопросы