Question

我有以下页面

如何将灰色部分和标题“开始分析”与所有内容一起移动到左侧。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <script type=text/javascript src="/static/js/jquery.js"></script>
    <script src="/static/js/bootstrap.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
</head>

<body>
<nav class="navbar navbar-default" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <!-- Removed IPD link -->
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="/">Home</a></li>
            <li><a href="/about">About Us</a></li>
            <!-- changed name (seenu.andi-rajendran) -->
            <li><a href="/select_doc">Detect Suspicious Passage(s)!</a></li>
            <!-- Added Help -->
            <li><a href="/help">Help</a></li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>




    <div class="container" xmlns="http://www.w3.org/1999/html">
        <!-- Changed heading -->
        <h1>Start Analysis</h1>
        <div class="jumbotron">

            <div class="form-group">


                <form action='/view_doc'>

                    <div class="form-group">
                        <label for="usr">Select Doc:</label>
                        <select name="doc">

                                <option value='source2'>source2</option>

                                <option value='hamlet_clean'>hamlet_clean</option>

                                <option value='test1'>test1</option>

                                <option value='Tz'>Tz</option>

                                <option value='test3'>test3</option>

                                <option value='emma_clean'>emma_clean</option>

                                <option value='Gdp'>Gdp</option>

                                <option value='easy_source'>easy_source</option>

                                <option value='test2'>test2</option>

                                <option value='Ao'>Ao</option>

                                <option value='easy_test'>easy_test</option>

                                <option value='emma_and_shakespeare'>emma_and_shakespeare</option>

                                <option value='Vm'>Vm</option>

                                <option value='Rlm'>Rlm</option>

                                <option value='Ww'>Ww</option>

                                <option value='rowling_and_dickens'>rowling_and_dickens</option>

                                <option value='source1'>source1</option>

                                <option value='Tmm'>Tmm</option>

                                <option value='test4'>test4</option>

                                <option value='source3'>source3</option>

                                <option value='sample_files'>sample_files</option>

                                <option value='Aaf'>Aaf</option>

                        </select>
                    </div>
                <br>
                 <div class="form-group">
                     <!-- Added heading -->
                    <h3>Style Model</h3>

                     <!-- Pushed style model loading option upwards-->
                     <div class="form-group">
                    <i>Load existing Style Model ?</i>&emsp;
                    <input type="radio" name='qload' value="yes"
                           onclick="document.getElementById('load_config').style.display = 'block';document.getElementById('over_config').style.display = 'block';"><i>Yes</i>
                    <input type="radio" name='qload' value="no"
                           onclick="document.getElementById('load_config').style.display = 'none';document.getElementById('over_config').style.display = 'none';"
                           checked><i>No</i><br>
                    </div>

                <label>Atom Type:</label>

                        <input type="radio" class="atomClass" name="atom" value="paragraph">
                        paragraph&emsp;

                        <input type="radio" class="atomClass" name="atom" value="sentence">
                        sentence&emsp;

                        <input type="radio" class="atomClass" name="atom" value="nchars">
                        nchars&emsp;

                </div>
                <br>
                    <div class="form-group">
                <label>Stylistic Feature(s):</label>
                    <select id="features" name="features" multiple>
                    </select>


                </div>
                <br>
                <div class="form-group">
                    <!--Modified Clustering Method heading-->
                <label>Clustering Method:</label>
                    <select name="cluster_method">

                            <option value="kmeans">kmeans</option>

                            <option value="agglom">agglom</option>

                            <option value="density_based">density_based</option>

                            <option value="hmm">hmm</option>

                            <option value="none">none</option>

                            <option value="cos">cos</option>

                    </select>
                &emsp;<!--Modifiying cluster value-->
                <label>No. of cluster:</label>

                    <select name="k">
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                    </select>
                </div>

                    <div class="form-group">
                        <!-- included creation/modification of style models(seenu.andi-rajendran)-->
                    <br><i>Save Style Model ?</i>&emsp;
                    <input type="radio" class="save_config" name="save_config" value="yes"
                           onclick="document.getElementById('fname').style.display = 'block';"><i>Yes</i>
                    <input type="radio" class="save_config" name="save_config" value="no"
                           onclick="document.getElementById('fname').style.display = 'none';" checked><i>No</i><br>
                    <div id="fname" class="form-group" style="display: none;"><i>Style Model file name</i>&emsp;
                        <input type="text" name="fname" value="" width="30" height="30"><br>
                    </div>
                    </div>


                    <div id="over_config" class="form-group" style="display: none;"><i>Overwrite Style Model ?</i>&emsp;
                        <input type="radio" name="over_config" value="yes"> <i>Yes</i>
                        <input type="radio" name="over_config" value="no" checked><i>No</i><br>
                    </div>


                    <div id="load_config" class="form-group" style="display: none;">
                        <i>Load Style Model</i>&emsp;
                        <select name="lname">

                                <option value='blah.json'>blah.json</option>

                                <option value='new'>new</option>

                                <option value='arun'>arun</option>

                                <option value='seenu_arun'>seenu_arun</option>

                                <option value='blah'>blah</option>

                                <option value='test'>test</option>

                                <option value='seenu'>seenu</option>

                                <option value='sddsds'>sddsds</option>

                                <option value='test7'>test7</option>

                        </select>
                    </div>


                    <div class="btn btn-default">
                        <input type='submit' value='Go'>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- loading of stylistic features according to atom type when selected (seenu.andi-rajendran)-->

</body>
</html>

我正在使用boostrap-min 3.0.0。我已经查看了已经存在的答案，但大多数都描述了如何传输在我的情况下不起作用的文本和图像。请帮忙

Answer 1

您可以尝试使用以下样式

.container{
float:left;
}

希望这会有所帮助。

Answer 2

试试这个

将 jumbotron类与 h1标记一起插入

<div class="col-md-6 col-md-pull-6">
</div>

或

<div class="col-md-6">
    insert.....here
</div>

<div class="col-md-6">
   Keep blank if you have no item to float right
</div>

Answer 3

在Bootstrap中.container类具有以下样式：

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

以上样式使得.container类的元素始终居中。您需要稍微改写这些样式。

以下是两种可能的方式：

方法＃01：

您可以通过将margin-left值替换为auto来覆盖0属性，即

.container {
  margin-left: 0;
}

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

.container {
  margin-left: 0;
}

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <!-- Removed IPD link -->
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li><a href="/">Home</a></li>
      <li><a href="/about">About Us</a></li>
      <!-- changed name (seenu.andi-rajendran) -->
      <li><a href="/select_doc">Detect Suspicious Passage(s)!</a></li>
      <!-- Added Help -->
      <li><a href="/help">Help</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>
<div class="container" xmlns="http://www.w3.org/1999/html">
  <!-- Changed heading -->
  <h1>Start Analysis</h1>
  <div class="jumbotron">

    <div class="form-group">


      <form action='/view_doc'>

        <div class="form-group">
          <label for="usr">Select Doc:</label>
          <select name="doc">

            <option value='source2'>source2</option>

            <option value='hamlet_clean'>hamlet_clean</option>

            <option value='test1'>test1</option>

            <option value='Tz'>Tz</option>

            <option value='test3'>test3</option>

            <option value='emma_clean'>emma_clean</option>

            <option value='Gdp'>Gdp</option>

            <option value='easy_source'>easy_source</option>

            <option value='test2'>test2</option>

            <option value='Ao'>Ao</option>

            <option value='easy_test'>easy_test</option>

            <option value='emma_and_shakespeare'>emma_and_shakespeare</option>

            <option value='Vm'>Vm</option>

            <option value='Rlm'>Rlm</option>

            <option value='Ww'>Ww</option>

            <option value='rowling_and_dickens'>rowling_and_dickens</option>

            <option value='source1'>source1</option>

            <option value='Tmm'>Tmm</option>

            <option value='test4'>test4</option>

            <option value='source3'>source3</option>

            <option value='sample_files'>sample_files</option>

            <option value='Aaf'>Aaf</option>

          </select>
        </div>
        <br>
        <div class="form-group">
          <!-- Added heading -->
          <h3>Style Model</h3>

          <!-- Pushed style model loading option upwards-->
          <div class="form-group">
            <i>Load existing Style Model ?</i>&emsp;
            <input type="radio" name='qload' value="yes"
                   onclick="document.getElementById('load_config').style.display = 'block';document.getElementById('over_config').style.display = 'block';"><i>Yes</i>
            <input type="radio" name='qload' value="no"
                   onclick="document.getElementById('load_config').style.display = 'none';document.getElementById('over_config').style.display = 'none';"
                   checked><i>No</i><br>
          </div>

          <label>Atom Type:</label>

          <input type="radio" class="atomClass" name="atom" value="paragraph">
          paragraph&emsp;

          <input type="radio" class="atomClass" name="atom" value="sentence">
          sentence&emsp;

          <input type="radio" class="atomClass" name="atom" value="nchars">
          nchars&emsp;

        </div>
        <br>
        <div class="form-group">
          <label>Stylistic Feature(s):</label>
          <select id="features" name="features" multiple>
          </select>


        </div>
        <br>
        <div class="form-group">
          <!--Modified Clustering Method heading-->
          <label>Clustering Method:</label>
          <select name="cluster_method">

            <option value="kmeans">kmeans</option>

            <option value="agglom">agglom</option>

            <option value="density_based">density_based</option>

            <option value="hmm">hmm</option>

            <option value="none">none</option>

            <option value="cos">cos</option>

          </select>
          &emsp;<!--Modifiying cluster value-->
          <label>No. of cluster:</label>

          <select name="k">
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
          </select>
        </div>

        <div class="form-group">
          <!-- included creation/modification of style models(seenu.andi-rajendran)-->
          <br><i>Save Style Model ?</i>&emsp;
          <input type="radio" class="save_config" name="save_config" value="yes"
                 onclick="document.getElementById('fname').style.display = 'block';"><i>Yes</i>
          <input type="radio" class="save_config" name="save_config" value="no"
                 onclick="document.getElementById('fname').style.display = 'none';" checked><i>No</i><br>
          <div id="fname" class="form-group" style="display: none;"><i>Style Model file name</i>&emsp;
            <input type="text" name="fname" value="" width="30" height="30"><br>
          </div>
        </div>


        <div id="over_config" class="form-group" style="display: none;"><i>Overwrite Style Model ?</i>&emsp;
          <input type="radio" name="over_config" value="yes"> <i>Yes</i>
          <input type="radio" name="over_config" value="no" checked><i>No</i><br>
        </div>


        <div id="load_config" class="form-group" style="display: none;">
          <i>Load Style Model</i>&emsp;
          <select name="lname">

            <option value='blah.json'>blah.json</option>

            <option value='new'>new</option>

            <option value='arun'>arun</option>

            <option value='seenu_arun'>seenu_arun</option>

            <option value='blah'>blah</option>

            <option value='test'>test</option>

            <option value='seenu'>seenu</option>

            <option value='sddsds'>sddsds</option>

            <option value='test7'>test7</option>

          </select>
        </div>


        <div class="btn btn-default">
          <input type='submit' value='Go'>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- loading of stylistic features according to atom type when selected (seenu.andi-rajendran)-->

方法＃02：

您可以使用Bootstrap的Quick float类pull-left沿.container类：

<div class="container pull-left">
    // content goes here...
</div>

在自定义样式中跟随css：

@media (max-width: 767px) {
  .container {
    width: 100%;
  }
}

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

@media (max-width: 767px) {
  .container {
    width: 100%;
  }
}

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <!-- Removed IPD link -->
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li><a href="/">Home</a></li>
      <li><a href="/about">About Us</a></li>
      <!-- changed name (seenu.andi-rajendran) -->
      <li><a href="/select_doc">Detect Suspicious Passage(s)!</a></li>
      <!-- Added Help -->
      <li><a href="/help">Help</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

<div class="container pull-left" xmlns="http://www.w3.org/1999/html">
  <!-- Changed heading -->
  <h1>Start Analysis</h1>
  <div class="jumbotron">

    <div class="form-group">


      <form action='/view_doc'>

        <div class="form-group">
          <label for="usr">Select Doc:</label>
          <select name="doc">

            <option value='source2'>source2</option>

            <option value='hamlet_clean'>hamlet_clean</option>

            <option value='test1'>test1</option>

            <option value='Tz'>Tz</option>

            <option value='test3'>test3</option>

            <option value='emma_clean'>emma_clean</option>

            <option value='Gdp'>Gdp</option>

            <option value='easy_source'>easy_source</option>

            <option value='test2'>test2</option>

            <option value='Ao'>Ao</option>

            <option value='easy_test'>easy_test</option>

            <option value='emma_and_shakespeare'>emma_and_shakespeare</option>

            <option value='Vm'>Vm</option>

            <option value='Rlm'>Rlm</option>

            <option value='Ww'>Ww</option>

            <option value='rowling_and_dickens'>rowling_and_dickens</option>

            <option value='source1'>source1</option>

            <option value='Tmm'>Tmm</option>

            <option value='test4'>test4</option>

            <option value='source3'>source3</option>

            <option value='sample_files'>sample_files</option>

            <option value='Aaf'>Aaf</option>

          </select>
        </div>
        <br>
        <div class="form-group">
          <!-- Added heading -->
          <h3>Style Model</h3>

          <!-- Pushed style model loading option upwards-->
          <div class="form-group">
            <i>Load existing Style Model ?</i>&emsp;
            <input type="radio" name='qload' value="yes"
                   onclick="document.getElementById('load_config').style.display = 'block';document.getElementById('over_config').style.display = 'block';"><i>Yes</i>
            <input type="radio" name='qload' value="no"
                   onclick="document.getElementById('load_config').style.display = 'none';document.getElementById('over_config').style.display = 'none';"
                   checked><i>No</i><br>
          </div>

          <label>Atom Type:</label>

          <input type="radio" class="atomClass" name="atom" value="paragraph">
          paragraph&emsp;

          <input type="radio" class="atomClass" name="atom" value="sentence">
          sentence&emsp;

          <input type="radio" class="atomClass" name="atom" value="nchars">
          nchars&emsp;

        </div>
        <br>
        <div class="form-group">
          <label>Stylistic Feature(s):</label>
          <select id="features" name="features" multiple>
          </select>


        </div>
        <br>
        <div class="form-group">
          <!--Modified Clustering Method heading-->
          <label>Clustering Method:</label>
          <select name="cluster_method">

            <option value="kmeans">kmeans</option>

            <option value="agglom">agglom</option>

            <option value="density_based">density_based</option>

            <option value="hmm">hmm</option>

            <option value="none">none</option>

            <option value="cos">cos</option>

          </select>
          &emsp;<!--Modifiying cluster value-->
          <label>No. of cluster:</label>

          <select name="k">
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
          </select>
        </div>

        <div class="form-group">
          <!-- included creation/modification of style models(seenu.andi-rajendran)-->
          <br><i>Save Style Model ?</i>&emsp;
          <input type="radio" class="save_config" name="save_config" value="yes"
                 onclick="document.getElementById('fname').style.display = 'block';"><i>Yes</i>
          <input type="radio" class="save_config" name="save_config" value="no"
                 onclick="document.getElementById('fname').style.display = 'none';" checked><i>No</i><br>
          <div id="fname" class="form-group" style="display: none;"><i>Style Model file name</i>&emsp;
            <input type="text" name="fname" value="" width="30" height="30"><br>
          </div>
        </div>


        <div id="over_config" class="form-group" style="display: none;"><i>Overwrite Style Model ?</i>&emsp;
          <input type="radio" name="over_config" value="yes"> <i>Yes</i>
          <input type="radio" name="over_config" value="no" checked><i>No</i><br>
        </div>


        <div id="load_config" class="form-group" style="display: none;">
          <i>Load Style Model</i>&emsp;
          <select name="lname">

            <option value='blah.json'>blah.json</option>

            <option value='new'>new</option>

            <option value='arun'>arun</option>

            <option value='seenu_arun'>seenu_arun</option>

            <option value='blah'>blah</option>

            <option value='test'>test</option>

            <option value='seenu'>seenu</option>

            <option value='sddsds'>sddsds</option>

            <option value='test7'>test7</option>

          </select>
        </div>


        <div class="btn btn-default">
          <input type='submit' value='Go'>
        </div>
      </form>
    </div>
  </div>
</div>
<!-- loading of stylistic features according to atom type when selected (seenu.andi-rajendran)-->

将容器完全移到左侧

3 个答案: