引导文本脱离div

时间:2018-05-31 13:38:37

标签: twitter-bootstrap-3

嘿伙计我正在使用bootstrap,我想在一个div中有文字,但我写的文字超出div的宽度而不是出现或下一行...这里是我的html:

#include <stdio.h>

int main() {
  double price = 14.25;
  printf("%d",price);
  return 0;
}

和我的css:

<!Doctype html>
<html>
    <head>
        <meta charset="utf-8" >
        <title>AGORA</title>
        <link rel="stylesheet" href="bootstrap.min.css">
        <link rel="stylesheet" href="SITE.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <div class="container-fluid">

            <div class="row entete">

            </div>

            <div class="row">

                <!-- PROFIL -->
                <div class="col-md-5">  
                    <!-- PHOTO ET PRES -->
                    <div class="row">
                        <!-- PHOTO -->
                        <div class="col-md-3" style="padding:0;"><img src="profil.jpg" class="img-responsive"></div>
                        <!-- PRESENTATION -->
                        <div class="col-md-9">
                            <p>PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</p>
                        </div>
                    </div>

                    <!-- INFOS DU MEC -->
                    <div class="row bordure"></div>
                    <!-- NIVEAU TROPHEES ET CENTRE INTERET -->
                    <div class="row bordure"></div>
                </div>



                <!-- DEBATS -->
                <div class="col-md-7">
                    <div class="row bordure"></div>
                    <div class="row bordure"></div>

                </div>
            </div>
        </div>
    </body>
</html>

我不明白,虽然div中的文字不会留在其中......

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

这是代码:

&#13;
&#13;
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
  <header style="background-color: blue">
    <h1>Most important heading here</h1>
    <h3>Less important heading here</h3>
    <p>Some additional information here.</p>
  </header>

  <div class="container-fluid img-responsive">
      <h1>Hello World!</h1>
      <p>Resize the browser window to see the effect.</p>
      <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
      <div class="row">
        <div class="col-xs-4 col-sm-4 col-lg-4 col-xl-4" ><img src="https://www.listefit.com/wp-content/uploads/2017/12/tiny-png-google-g%C3%B6rsel-optimizasyonu.jpg" width="200px" height="200px"></div>
        <div class="col-xs-8 col-sm-8 col-lg-8 col-xl-8" style="word-wrap: break-word ">PRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATIONPRESENTATION</div>
        
      </div>
    <script src="" async defer></script>
</body>

</html>
&#13;
&#13;
&#13;

立即查看小提琴:https://jsfiddle.net/77qmh8zm/